——林肯 今天遇到一个问题,umijs框架下的环境变量配置不好使 首先是我package.json里的配置是这样的: "scripts": { "start": "cross-env NODE_ENV "start": "cross-env NODE_ENV=test umi dev" } 其打印出来的结果仍然是development,(大概是这个效果,这里是手动做的打印数据) 于是按照umijs process.env': process.env }); 打印结果 此时虽然成功修改到了全局变量,但我这个.umirc.ts没有按照我package.json中的环境变量进行多环境应用配置,于是我找到了umijs
+ ANT DESIGN PRO 的架构来进行项目升级(之前的老项目基于 Umi2.0 与 ANT DESIGN PRO 3.0 开发) UmiJS 是什么? UmiJS,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。 快速搭建基础框架 我们直接采用 UmiJS 3.0 + Ant Design Pro 4.0 来构建一个基础的模板。 如果你是按照上述的模板下来,再删除 @umijs/plugin-locale 的配置之后,项目就会报错,按照报错的内容修正就行。 毕竟 UmiJS + Ant Design Pro 双双结合之后的基础框架非常成熟,简单加一些功能即可进行业务开发,如果需要定制的话,可以自行增减功能。
1、放到public 文件家里 2、vedio 标签加载src 直接下./ 在root 目录加载即可
1、 安装 Mysql 并导入 /mysql/xmw_admin.sql 文件,修改 /Xmw_server/.development.env 文件中的数据库配置,这一步要保证成功,不然后端服务起不来
punycode.toASCII is not a function (#6871) 代码修改记录 下面看一下原因: 查看 hotModuleReplacement.js 文件源码 (文件位置: \node_modules\@umijs 未经允许不得转载: UmiJS less文件热更新报错:punycode.toASCII is not a function
但是无法导出样式,集成xlsx-style 可以实现但是出现了如下bug 环境背景 框架UmiJS yarn antd-table 导出,依赖js-export-excel 库 出现问题 ERROR
react-inspector.js:18:9) at Service.initPlugin (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs service\service.js:346:40) at Service.run (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs not allowed at Function.validateConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs config.js:174:31) at Config.getConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs config.js:174:31) at Config.getConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs
/node_modules/@umijs/bundler-webpack/compiled/postcss-loader/index.js?? /node_modules/@umijs/bundler-webpack/compiled/less-loader/index.js?? \src\.umi\plugin-access' 安装 @umijs/plugin-access : # npm npm install @umijs/plugin-access --save # or /max 或者加载 model 插件: yarn add @umijs/plugins /config/config.ts : export default { plugins: [ '@umijs \node_modules\@umijs\utils\compiled\rimraf\index.js:1:38448) at ...
umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。
插件化的企业级前端应用框架,帮助你更好更快的开发 React 应用 qiankun[2] 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 @umijs 首先我们在三个应用中安装 @umijs/plugin-qiankun npm install @umijs/plugin-qiankun -S 在子应用中配置 qiankun 开启 // .umirc.ts Reference [1] umi: https://umijs.org/zh-CN [2] qiankun: https://qiankun.umijs.org/zh [3] @umijs/plugin-qiankun : https://umijs.org/zh-CN/plugins/plugin-qiankun [4] 宇宙第三前端团队招人啦! getting-started [7] 「umi-micro-apps」: https://github.com/brickspert/umi-micro-apps [8] plugin-qiankun: https://umijs.org
这2款都是非常优秀的转码工具,在本套课程中并不会直接使用,而是会使用阿里的开源企业级react框架:UmiJS。 1.12.1、了解UmiJS 官网:https://umijs.org/zh/ ? UmiJS 读音:(乌米) 特点: 插件化 umi 的整个生命周期都是插件化的,甚至其内部实现就是由大量插件组成,比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等,都是由插件实现
2.3、搭建环境 2.3.1、创建项目 我们依然选择使用UmiJS作为构建工具。 创建工程: ? ? ? 输入命令,进行初始化: tyarn init -y 初始化完成: ? 在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。 ? 在umi中,约定的目录结构如下: ? 具体可查看:https://umijs.org/zh/plugin/umi-plugin-react.html #添加插件 tyarn add umi-plugin-react --dev 添加成功:
# 简介 Umi 官网:https://umijs.org/ GitHub:https://github.com/umijs/umi 蚂蚁的,基于react 免费企业级 建议学习乌米3 请求库用axios # 不能使用umi IE8或者更低浏览器 # 使用 可能网络不好会失败yarn前一共不到4kb yarn create @umijs/umi-app yarn 启用项目 yarn start 出现Page }); # mock Mock.js 前后端分离使用,个人感觉没有apifox好用 http://mockjs.com/0.1/ 安装 npm install mockjs # 插件 # @umijs API.ISystemInfo> { //应该用ajax从服务器获取公共的信息 return Promise.resolve({systemName: "设计师工作台"}); } # @umijs
分享一个微前端框架乾坤:https://qiankun.umijs.org/zh github:https://github.com/umijs/qiankun 快速开始:https://qiankun.umijs.org
所以准备改造一下,将常量和后期会变化的参数拆分开,使用 dva 来实现全局共享数据,了解到 Umi 官方有一个 @umijs/plugin-model 插件可以满足需求。 @umijs/plugin-model 一种基于 hooks 范式的简易数据管理方案(部分场景可以取代 dva),通常用于中台项目的全局共享数据。 那么,在业务开发中,如果我们需要提取的逻辑和状态都希望能够在多个组件中『共享』,就像其他数据流管理工具(dva, mobx)一样,@umijs/plugin-model 就是一个不错的选择。 globalData, selectZzjg, setSelectZzjg, }; }; export default commonData; 这就是一个普通的自定义 hooks,但 @umijs
PriJs & UmiJs PriJs & UmiJs 二者正是以上述观点为基础的,基于 react 并包含了工具 & 路由 & 性能优化 & 数据流等强约定弱配置的前端一站式框架,通过约定、自动生成和解析代码等方式来辅助开发 构建工具 webpack 是目前主流的前端代码构建工具,但其复杂的配置一直是前端开发者头疼之处,PriJs & UmiJs 框架内部解决了这一难题,它们将 webpack 复杂的性能优化配置全部内置化, 页面&路由 PriJs & UmiJs 提供页面生成模版,并自动根据项目页面生成路由,通过单页面或多页面特性决定路由跳转的类型,默认提供 404 页面。 数据流 PriJs & UmiJs 虽然是基于 react 的前端一站式框架,暂不支持 vue、angular 等,但并不局限数据流的使用的方式,可以根据项目需求使用任意数据流方式,如 redux、mobx 插件机制 PriJs & UmiJs 提供了灵活的插件机制,使项目能够拥有强大的定制能力,通过插件机制可以变更 webpack 配置、修改路由规则、修改页面模版、新增命令、使用任意数据流、定制项目规范和约定等
前言 用的是umi 2.x ,写起来挺舒服;顺带完善了上一版本后台的一些细节问题,功能等 umijs类似create-react-app, 也是一套方案的集合体,亮点很多.可以具体官网去看 声明式的路由 都会自动产生可访问的页面, 也就是说文件会被当做路由组件; 屏蔽的话, 打开项目的配置文件.umirc.js const path = require('path'); // ref: https://umijs.org /config/ export default { plugins: [ // ref: https://umijs.org/plugin/umi-plugin-react.html }, ], ], }; 复制代码 ---- umi配置开发的反向代理及目录的alias const path = require('path'); // ref: https://umijs.org
安装依赖 首先我们需要在项目里安装包@umijs/openapi: yarn add @umijs/plugin-openapi 这其实就是在antd pro中使用的openapi插件,它跟antd ⚙️配置 首先配置OpenAPI的生成规则,添加以下openapi.config.ts配置文件: import {generateService} from '@umijs/openapi' generateService
2.3、搭建环境 2.3.1、创建项目 我们依然选择使用UmiJS作为构建工具。 在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。
React Props Children 传值 背景是在使用 umijs 框架时,它提供一个根节点 layout。 props.children 的值存在三种可能性: 如果当前组件没有子节点,值类型为 undefined 如果当前组件只有一个子节点,值类型为 object 如果当前组件有多个子节点,值类型为 array 在 umijs return React.cloneElement(child, { test: 'test' }) }) return <>{childrenWithProps}</> } 多层传值 在 umijs