共计 4644 个字符，预计需要花费 12 分钟才能阅读完成。
上一篇介绍了 umi 需要了解的知识
开发环境搭建，这篇我会介绍怎么搭建 umi 项目
开发环境
UMI 在 Windows, Mac 和 Linux 的表现都是一致的。你只需要在电脑上安装 Node.js 环境。为了便于开发，你还需要一个文本编辑器来编写代码，可能你的电脑上已经安装了其他的文本编辑器，但这里我还是推荐使用 VisualStudio Code。因为后续我们会使用配套的 VisualStudio Code 插件来提升开发效率，并且它还自带了一个命令行执行脚本。
第一步 安装 Node.js
安装 Node 还是挺简单的，只需要到官网下载使用与自己系统的版本就可以了。所有的安装都是“下一步”，就可以了。如果你已经安装过 Node，那么你可以跳过前一步。接下来在终端 / 控制台窗口中运行命令 node -v, 来验证一下你正在运行 node 8.1x 以上的版本
>node -v
v8.10.1
如果终端成功打印出 node 的版本号，就可以进入下一步了。
第二步 安装 VisualStudio Code
还是官网下载, 全部下一步。
使用 umi
第一步 安装 Umi
我们需要使用 Umi 来创建页面（umi g），并执行多种开发任务，比如测试（umi test）、打包（umi build）和开发（umi dev）等。全局安装 Umi。使用 npm 来安装 Umi, 请打开终端 / 控制台窗口，并输入下列命令：
npm install -g umi
推荐使用 yarn 来安装 Umi, 因为 yarn 对于多次执行安装的情况做了缓存，这个在我们前期，经常新建项目的时候，能够节省很多时间。
npm install -g yarn
命令行执行结束后，判断 yarn 是否安装成功
yarn -v
1.12.3
使用 yarn 安装 Umi
yarn global add umi
命令行执行结束后，判断 yarn 是否安装成功
umi -v
2.3.2
第二步 安装 create-umi
yarn global add create-umi
…
success Installed “create-umi@0.7.0″ with binaries:
– create-umi
✨ Done in 36.07s
create-umi 主要是用来使用命令行创建 umi 相关的库或者项目。命令中打印 success，应该就安装成功了，如果你还需要进一步确认，可以通过执行 create-umi - v 来打印 create-umi 的版本号。
第三步 使用 create-umi 新建项目
注意：第一个选项先选择 project。这里的 system 指的是项目名，你可以输入任意的名字。
create-umi system
? Select the boilerplate type (Use arrow keys)
❯ project
ant-design-pro
plugin
block
? What functionality do you want to enable?
◉ antd
❯◉ dva
◯ code splitting
◯ dll
◯ hard source
create-umi 提供的定制化能力，你可以通过空格键来选中你需要的功能，然后通过敲击回车键，来确认开始创建项目。这里我们选中 antd 和 dva 就好。
? What functionality do you want to enable? antd, dva
create package.json
create mock/.gitkeep
create src/assets/yay.jpg
create src/layouts/index.css
create src/layouts/index.js
create src/pages/index.css
create src/pages/index.js
create src/global.css
create .gitignore
create .editorconfig
create .env
create .umirc.js
create .eslintrc
create .prettierrc
create .prettierignore
create src/models/.gitkeep
create src/app.js
???? Copied to clipboard, just use Ctrl+V
✨ File Generate Done
如果你的命令行打印的日志如上，那就说明你新建项目完成了，如果有其他的错误，可以确认一下，当前目录下是否存在 system 文件夹。注意 create-umi 会自动帮你新建 system 文件夹，所以你可以稍微注意一下。
切换到项目目录，安装依赖
cd system
yarn
… 这个过程需要一点时间
success Saved lockfile.
✨ Done in 170.43s.
看到命令行打印 success，一般就是安装成功了，但是有时候因为一些网络问题，会出现丢包的情况。所以我们继续验证。
启动开发服务器
yarn start
yarn run v1.12.3
$ umi dev
✔ Webpack
Compiled successfully in 5.28s
Starting the development server…
DONE Compiled successfully in 5289ms 14:44:47
App running at:
– Local: http://localhost:8000/ (copied to clipboard)
– Network: http://192.168.124.10:8000/
打印如上日志，说明项目初始化成功了。你可以通过浏览器访问 http://localhost:8000/ 来访问页面。
第四步 项目结构
.
├── mock
├── package.json
├── src
│ ├── app.js
│ ├── assets
│ │ └── yay.jpg
│ ├── global.css
│ ├── layouts
│ │ ├── index.css
│ │ └── index.js
│ ├── models
│ └── pages
│ ├── index.css
│ └── index.js
├── .env
└── .umirc.js
这里是我们当前项目的目录结构，使用 create-umi 创建的项目，是一个典型的 umi 项目结构，我们可以在 umi 约定使用的目录中，添加我们所需要的内容，达到快速实现功能需求的目的。
./mock/
约定 mock 目录里所有的 .js 文件会被解析为 mock 文件。比如，新建 mock/users.js，内容如下：
export default {
‘/api/users’: [‘a’, ‘b’],
}
然后在浏览器里访问 http://localhost:8000/api/users 就可以看到 [‘a’, ‘b’] 了。
使用了 mock.js 后你在也不用苦苦的等后端开发完成接口了
./src/
我们约定了将项目的所有源码放在 src 目录里面，umi 项目的大部分的工作都将在这里进行。当我们运行 umi dev 或者 umi build 时，我们的代码会被转换成浏览器能够运行的正确的 JavaScript 版本，所以我们可以在这里使用 TypeScript 或者其他 JavaScript 新语法。
./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’},
] }
]
从组件角度可以简单的理解为如下关系：
<layout>
<page>1</page>
<page>2</page>
</layout>
./src/pages/
约定 pages 下所有的 (j|t)sx? 文件即路由。在 umi 中可以使用约定式路由和配置式路由，在实际项目开发中，我个人偏向于使用，约定式路由。毕竟这是 umi 的主要特性之一。使用约定式路由，意味着不需要维护，可怕的路由配置文件。最常用的有基础路由和动态路由（用于详情页等，需要从 url 取参数的情况）
基础路由
假设 pages 目录结构如下
+ pages/
+ users/
– index.js
– list.js
– index.js
那么，umi 会自动生成路由配置如下：
[
{path: ‘/’, component: ‘./pages/index.js’},
{path: ‘/users/’, component: ‘./pages/users/index.js’},
{path: ‘/users/list’, component: ‘./pages/users/list.js’},
]
动态路由
umi 里约定，带 $ 前缀的目录或文件为动态路由。比如以下目录结构：
+ pages/
+ $post/
– index.js
– comments.js
+ users/
$id.js
– index.js
会生成路由配置如下：
[
{path: ‘/’, component: ‘./pages/index.js’},
{path: ‘/users/:id’, component: ‘./pages/users/$id.js’},
{path: ‘/:post/’, component: ‘./pages/$post/index.js’},
{path: ‘/:post/comments’, component: ‘./pages/$post/comments.js’},
]
./src/pages/404.js
当访问的路由地址不存在时，会自动显示 404 页面。只有 build 之后生效。调试的时候可以访问 /404。
./src/pages/document.ejs
有这个文件时，会覆盖默认的 HTML 模板。需至少包含以下代码，
<div id=”root”></div>
常用于需要设置网站名称，增加 meta，增加头部 js
./src/pages/.umi/
这是 umi dev 时生产的临时目录，默认包含 umi.js 和 router.js，有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。
./src/pages/.umi-production/
同 src/pagers/.umi，但是是在 umi build 时生成的，会在 umi build 执行完自动删除。
文件名后缀.test.js 和 .e2e.js
测试文件，umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。
./src/global.(j|t)sx?
在入口文件最前面被自动引入，可以考虑在此加入 polyfill。umi 区别于其他前端框架，没有显示的程序主入口，如 src/app.js 或 src/index.js，所以在引用某些模块的时候，如果模块功能要求在程序主入口添加代码时，你就可以写到这个文件。
./src/global.(css|less|sass|scss)
这个文件不走 css modules，自动被引入，可以写一些全局样式，或者做一些样式覆盖。
.umirc.js 和 ./config/config.js
umi 的配置文件，二选一。当两者同时存在时，优先使用.umirc.js。
.env
环境变量，比如
BROWSER=none
准备工作就是这些，接下来就是实际开发了
