使用UmiJS框架开发React

1、什么是Umi.js?

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。你可以将它简单的理解为一个专注性能的类 next.js前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

2、为什么使用Umi.js?

我们做react开发的时候会不会遇到以下问题？：
2.1 项目做大的时候，开发调试的启动和热更新时间会变得很长。
2.2 大应用下，网站打开很慢，有没有办法基于路由做到按需加载。
2.3 dva的model每次都要手写载入，能否一开始就同项目初始化好？

使用乌米，即可解决以上问题，并且还能提供如下优势：

• 开箱即用，内置 react、react-router 等
• 类 next.js 且功能完备的路由约定，同时支持配置的路由方式
• 完善的插件体系，覆盖从源码到构建产物的每个生命周期
• 一键兼容到 IE9
• 完善的 TypeScript 支持
• 与 dva 数据流的深入融合

3、开箱即用的中台前端/设计解决方案 ANT DESIGN PRO

1. 优雅美观 - 基于 Ant Design 体系精心设计
2. 常见设计模式 - 提炼自中后台应用的典型页面和场景
3. 最新技术栈 - 使用 React/dva/antd 等前端前沿技术开发
4. 响应式 - 针对不同屏幕大小设计
5. 主题 - 可配置的主题满足多样化的品牌诉求
6. 国际化 - 内建业界通用的国际化方案
7. 最佳实践 良好的工程实践助你持续产出高质量代码
8. Mock 数据 - 实用的本地数据调试方案
9. UI 测试 - 自动化测试保障前端产品质量

4、安装Umi

npm create umi `projectName`
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  plugin          - Create a umi plugin.

选择 ant-design-pro -> Pro V4 -> JavaScript Ant Design Pro 脚手架将会自动安装。

5、常用目录说明

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
│   └── ......
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── locales              # 国际化
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式