# 一、Umi简介

一个可插拔的企业级 react 应用框架。umi 以路由为基础的，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期

# 1.1 特性

• 开箱即用，内置 react、react-router 等
• 支持配置的路由方式
• 完善的插件体系，覆盖从源码到构建产物的每个生命周期
• 高性能，通过插件支持 PWA、以路由为单元的 code splitting 等
• 支持静态页面导出，适配各种环境，比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等
• 开发启动快，支持一键开启 dll 和 hard-source-webpack-plugin 等
• 一键兼容到 IE9，基于 umi-plugin-polyfills
• 完善的 TypeScript 支持，包括 d.ts 定义和 umi test
• 与 dva 数据流的深入融合，支持 duck directory、model 的自动加载、code splitting 等等

# 1.2 架构

# 1.3 和 dva、roadhog关系

• roadhog 是基于 webpack 的封装工具，目的是简化 webpack 的配置 umi 可以简单地理解为 roadhog + 路由，思路类似 next.js/nuxt.js，辅以一套插件机制，目的是通过框架的方式简化 React 开发
• dva 目前是纯粹的数据流，和 umi 以及 roadhog 之间并没有相互的依赖关系，可以分开使用也可以一起使用

# 二、环境搭建

$ mkdir myapp && cd myapp
$ yarn create umi

确定后，会根据你的选择自动创建好目录和文件

# 三、目录结构

dva 项目之前通常都是这种扁平的组织方式

+ models
  - global.js
  - a1.js
  - a2.js
  - b.js
+ services
  - a.js
  - b.js
+ routes
  - PageA.js
  - PageB.js

用了 umi 后，可以按页面维度进行组织

+ models/global.js
+ pages
  + a
    - index.js
    + models
      - a1.js
      - a2.js
    + services
      - a.js
  + b
    - index.js
    - model.js
    - service.js

Preview

• 一、Umi简介
  • 1.1 特性
  • 1.2 架构
  • 1.3 和 dva、roadhog关系
• 二、环境搭建
• 三、目录结构
• 四、路由配置
  • 4.1 约定式路由
    • 4.1.1 基础路由
    • 4.1.2 动态路由
    • 4.1.3 可选的动态路由
    • 4.1.4 嵌套路由
    • 4.1.5 全局 layout
    • 4.1.6 不同的全局 layout
    • 4.1.7 404 路由
    • 4.1.8 通过注释扩展路由
  • 4.2 配置式路由
  • 4.3 权限路由
  • 4.4 路由动效
  • 4.5 面包屑
  • 4.6 启用 Hash 路由
  • 4.7 页面间跳转
• 五、配置
• 六、Mock 数据
• 七、结合dva实践
• 八、问题汇总
• 九、Demo
• 十、参考

← Ant Design Pro总结篇Dva实践总结 →