共计 2882 个字符，预计需要花费 8 分钟才能阅读完成。
之前写完了 dva 入门系列, 它只是一个纯粹的数据流框架, 拿来开发是没有问题的. 但是还是有一些繁琐的步骤, 每次要手动注册 model, 手写 route 路由.Umi 的出现结合 dva, 使得开发更加的优雅与便捷.
1 特性
???? 开箱即用，内置 react、react-router 等???? 类 next.js 且功能完备的路由约定，同时支持配置的路由方式???? 完善的插件体系，覆盖从源码到构建产物的每个生命周期???? 高性能，通过插件支持 PWA、以路由为单元的 code splitting 等???? 支持静态页面导出，适配各种环境，比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等???? 开发启动快，支持一键开启 dll 和 hard-source-webpack-plugin 等???? 一键兼容到 IE9，基于 umi-plugin-polyfills???? 完善的 TypeScript 支持，包括 d.ts 定义和 umi test???? 与 dva 数据流的深入融合，支持 duck directory、model 的自动加载、code splitting 等等
2 使用脚手架
1. 安装 umi
npm install -g umi
2. 检查
umi -v
3. 安装脚手架
npm install -g create-umi
4. 使用脚手架初始化工程
create-umi
选择 >project, 然后选择依赖, 这节课先选择 antd, 不选择 dva.5. 运行项目进入项目目录, 先安装依赖，然后运行
npm install
npm start
6. 浏览器访问如果顺利，在浏览器打开 http://localhost:8000 可看到以下界面，
3 约定目录介绍
脚手架自动生成了一些目录，你需要按约定的方式去写，umi 才能正常运行一个复杂应用的目录结构如下：
.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录，基于 express
├── config/
├── config.js // umi 配置，同 .umirc.js，二选一
└── src/ // 源码目录，可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1，任意命名，导出 react 组件
├── page1.test.js // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2，任意命名
├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── .umirc.js // umi 配置，同 config/config.js，二选一
├── .env // 环境变量
└── package.json
敲黑板，知识点：umi 是按 page 来划分的，每一个 page 里只有自己的 model，service，util 等。不像 dva 的目录结构，所有的 model，service，page 统一管理。就看你喜欢什么样的管理方式了。
dist
默认输出路径，可通过配置 outputPath 修改。
mock
约定 mock 目录里所有的 .js 文件会被解析为 mock 文件。
比如，新建 mock/users.js，内容如下：
export default {‘/api/users’: [‘a’, ‘b’],} 然后在浏览器里访问 http://localhost:8000/api/users 就可以看到 [‘a’, ‘b’] 了。
src
约定 src 为源码目录，但是可选，简单项目可以不加 src 这层目录。
比如：下面两种目录结构的效果是一致的。
src
pages
index.js
layouts
index.js
.umirc.js
pages
index.js
layouts
index.js
.umirc.js
src/layouts/index.js
全局布局，实际上是在路由外面套了一层。
比如，你的路由是：
[{ path: ‘/’, component: ‘./pages/index’}, {path: ‘/users’, component: ‘./pages/users’},] 如果有 layouts/index.js，那么路由则变为：
[{ path: ‘/’, component: ‘./layouts/index’, routes: [
{path: ‘/’, component: ‘./pages/index’},
{path: ‘/users’, component: ‘./pages/users’},
] }]
src/pages
约定 pages 下所有的 (j|t)sx? 文件即路由。关于更多关于约定式路由的介绍，请前往路由章节。
src/pages/404.js
404 页面。注意开发模式下有内置 umi 提供的 404 提示页面，所以只有显式访问 /404 才能访问到这个页面。
src/pages/document.ejs
有这个文件时，会覆盖默认的 HTML 模板。需至少包含以下代码，
<div id=”root”></div>
src/pages/.umi
这是 umi dev 时生产的临时目录，默认包含 umi.js 和 router.js，有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。
src/pages/.umi-production
同 src/pages/.umi，但是是在 umi build 时生成的，会在 umi build 执行完自动删除。
.test.js 和 .e2e.js
测试文件，umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。
src/global.(j|t)sx?
在入口文件最前面被自动引入，可以考虑在此加入 polyfill。
src/global.(css|less|sass|scss)
这个文件不走 css modules，自动被引入，可以写一些全局样式，或者做一些样式覆盖。
.umirc.js 和 config/config.js
umi 的配置文件，二选一。
.env
环境变量，比如：
CLEAR_CONSOLE=none
BROWSER=none
主要注重 page 目录就行了，其他的在你入门学习过程中可能都用不到。
4 使用命令创建一个新的页面
进入 src 目录，执行命令
umi g page users
这样在 pages 目录下会生成新的 users 页面，浏览器访问 http://localhost:8000/users：
除了生成页面，还有别的命令
umi g 是 umi generate 的别名，可用于快速生成 component、page、layout 等，并且可在插件里被扩展，比如 umi-plugin-dva 里扩展了 dva:model，然后就可以通过 umi g dva:model foo 快速 dva 的 model。
