快速上手

环境准备

在开始之前，请确保你的开发环境已经包含了Node.js的开发环境 Umi需要Node.js的 8.1x 版本以上

• 检测Node版本，可以在终端/控制台窗口中运行命令。
• 要想安装 Node.js，可参考上一小节内容。

  $ node -v
  v8.11.3

注意：这里的版本号只要大于8.10就可以了，很多朋友的环境都是8.9+，可能会出现一些意料之外的问题。

第一步 安装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.9.4

使用yarn安装Umi

$ yarn global add umi

命令行执行结束后，判断yarn是否安装成功

$ umi -v
2.2.4

本次教程针对umi@2，如果你是用教程的时候，umi已经是@3或者更高版本的话，那可能会有部分API的差异。

注意：更多的时候，我们用到的是项目工作空间的umi，而不是全局的umi，这个在不同版本umi存在差异时，需要留意。

第二步 新建一个最简单的Umi项目

在你自己的工作空间或者任意目录，新建一个文件夹。可以使用命令行，或者右键创建空文件夹的方式都可以。

$ mkdir my-app

然后使用VS-Code打开这个空白文件夹,然后打开终端工具（此步操作，查看上一小节）。

后续提到的执行命令，指的都是在这里的命令行工具中执行，如果，你没有打开这个终端，那么你就要注意，需要cd切换到当前项目目录。 通过umi g page来创建页面

$ umi g page home
   create pages/home.js
   create pages/home.css
✔  success

你也可以通过新建文件的方式，来创建页面。 在 /my-app/pages/ 目录下，新建js文件的方式来，创建页面。

如果你的联想和我的不同，你可以通过安装vscode插件来实现，详细方法，参见上一小节。 最终我们将会得到以下的目录结构

└── pages
    ├── home.css
    ├── home.js
    └── list.js

这里的 pages 目录是页面所在的目录，umi 里约定默认情况下 pages 下所有的 js 文件即路由

第三步 启动开发服务器

```bash $ umi dev

Compiling ✔ success webpack compiled in 3s 49ms DONE Compiled successfully in 3056ms 22:37:57

App running at:

• Local: http://localhost:8000/ (copied to clipboard)
• Network: http://192.168.199.195:8000/

会自动打开浏览器，并访问 http://localhost:8000/。
![WX20181204-224026@2x.png | center | 747x386](https://cdn.nlark.com/yuque/0/2018/png/123174/1543934454320-ef9f8cbc-fd4d-4a9f-8db0-76b5da7b9f38.png "")
页面显示了开发环境下的404页面，因为我们没有在pages下面创建index.js。不过没有关系，我们可以通过访问http://localhost:8000/home来访问我们创建的页面。
![WX20181204-224204@2x.png | center | 281x67](https://cdn.nlark.com/yuque/0/2018/png/123174/1543934554533-51f989a6-48bb-40bd-b341-19e8513eb429.png "")
## 第四步 编辑页面
1.打开pages/home.js
2.编辑文件
```diff
<div className={styles.normal}>
- <h1>Page home</h1>
+ <h1>Welcome to Umi</h1>
</div>

3.保存文件

umi默认开启热更新功能，保存之后，就能直接在页面中看到变化。

代码回顾

你可以在my-app中看到，本节的全部代码。