1.umi简介
- 一个可插拔的企业级react应用框架。umi支持路由功能,支持路由级的按需加载。配以完善的插件体系 ,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
- umi介绍
2.安装部署
- 安装
- 安装nodejs
- 安装yarn:npm i yarn tyarn -g
- 安装umi:yarn global add umi
- 查看:umi -v
- 运行
- umi g(umi generate):快速生成component、page、layout组件
- umi dev:运行本地开发服务器
- umi build:编译
- serve ./dist:编译后运行本地服务器进行验证(需通过yarn global add serve安装serve)
3.功能说明
A.路由
- umi会根据pages目录自动生成路由配置
- 路由说明
- 分类
- 约定式路由
- 动态路由:约定带$前缀的目录或文件为动态路由
- 可选的动态路由:约定动态路由如果带$后缀,则为可选动态路由
- 嵌套路由:约定目录下有_layout.js时会生成嵌套路由,以 _layout.js为该目录的layout
- 全局layout:约定src/layouts/index.js为全局路由
- 404路由:约定pages/404.js为404页面,需返回React组件
- 通过注释扩展路由:约定路由文件的首个注释如果包含yaml格式的配置,则会被用于扩展路由
- 配置式路由
- 权限路由
- 路由动效
- 面包屑
- Hash History和Browser History(默认)
- Scroll to top
B.页面跳转
- 声明式:基于umi/link,通常作为React组件使用
- 命令式:基于umi/router,通常在事件处理中调用
C.配置文件
- 允许在.umirc.js或config/config.js(二选一,.umirc.js 优先)进行配置
D.HTML模板
- 约定如果src/pages/document.ejs存在,会作为默认模板,必须存在id=root的dom节点
- 模板里可通过context来获取到umi提供的变量
E.Mock数据
- 功能:通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑
- 约定mock文件夹下的文件或者page(s) 文件夹下的_mock文件即mock文件
遇到的问题
- 安装yarn后,链接的不是node的yarn
- 问题:本电脑早先安装了hadoop,运行了hadoop的yarn命令
- 解决:进入安装目录运行yarn命令(C:\Users\zengyaling\AppData\Roaming\npm\node_modules)
- 安装umi后,umi命令无效
- 问题:找不到umi命令
- 解决:查看umi的目录(yarn global bin),添加到环境变量path