从0到1-UMI快速上手（1）

开发环境搭建

开发环境

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
:sparkles:  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
:clipboard:  Copied to clipboard, just use Ctrl+V
:sparkles:  File Generate Done

如果你的命令行打印的日志如上，那就说明你新建项目完成了，如果有其他的错误，可以确认一下，当前目录下是否存在system文件夹。注意create-umi会自动帮你新建system文件夹，所以你可以稍微注意一下。

切换到项目目录，安装依赖

cd  system
yarn
...这个过程需要一点时间
success Saved lockfile.
:sparkles:  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

准备工作就是这些，接下来就是实际开发了