pingssys-umi基础

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