上一篇介绍了umi需要了解的知识开发环境搭建，这篇我会介绍怎么搭建umi项目开发环境UMI在Windows, Mac和Linux的表现都是一致的。你只需要在电脑上安装Node.js环境。为了便于开发，你还需要一个文本编辑器来编写代码，可能你的电脑上已经安装了其他的文本编辑器，但这里我还是推荐使用VisualStudio Code。因为后续我们会使用配套的VisualStudio Code插件来提升开发效率，并且它还自带了一个命令行执行脚本。第一步 安装Node.js安装Node还是挺简单的，只需要到官网下载使用与自己系统的版本就可以了。所有的安装都是“下一步”，就可以了。如果你已经安装过Node，那么你可以跳过前一步。接下来在终端/控制台窗口中运行命令node -v,来验证一下你正在运行 node 8.1x以上的版本>node -vv8.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 -v1.12.3使用yarn安装Umiyarn global add umi 命令行执行结束后，判断yarn是否安装成功umi -v2.3.2第二步 安装 create-umiyarn global add create-umi…success Installed “create-umi@0.7.0” with binaries: - create-umi✨ Done in 36.07screate-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 sourcecreate-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 systemyarn…这个过程需要一点时间success Saved lockfile.✨ Done in 170.43s.看到命令行打印success，一般就是安装成功了，但是有时候因为一些网络问题，会出现丢包的情况。所以我们继续验证。启动开发服务器yarn startyarn run v1.12.3$ umi dev✔ Webpack Compiled successfully in 5.28sStarting 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.jsumi 的配置文件，二选一。当两者同时存在时，优先使用.umirc.js。.env环境变量，比如BROWSER=none准备工作就是这些，接下来就是实际开发了