快速上手

环境准备

在开始之前，请确保你的开发环境已经安装了 Node.js，umi 需要 Node.js 10.13 版本以上：

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

$ node -v
v10.13.0

第一步 安装Umi

后续需要使用 umi 来创建页面 umi g ，并执行多种任务，比如测试 umi test 、打包 umi build 和开发 umi dev 等。为了能直接在命令行中运行这些命令，你需要打开终端/控制台窗口，输入以下命令来全局安装 umi ：

$ npm install -g umi

推荐使用 yarn 代替 npm 来安装 umi ， yarn 会针对部分场景做一些缓存以节省时间，你可以输入以下命令来全局安装 yarn ：

$ npm install -g yarn

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

$ yarn -v
1.9.4

然后使用 yarn 安装 umi ：

$ yarn global add umi

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

$ umi -v
3.0.16

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

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

在你的工作空间或者任意目录新建一个名为 my-app 的文件夹：

$ mkdir my-app

在 VS Code 点击「文件 - 打开文件夹」打开 my-app，然后打开终端工具。

注意：后续提到的执行命令都是在「终端」执行，如果你选择使用其他命令行工具，那么执行命令前你需要切换到当前项目的目录。

通过 umi g page 来创建页面：

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

你也可以手动新建 home.js 文件来创建页面。

如果你的输入提示和我的不同，你可以通过安装 VS Code 插件 Oni JavaScript Snippet 来获得相同的功能。

现在，你应该已经得到了以下的目录结构：

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

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

第三步 启动开发服务器

$ 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/

umi 在启动完成后将自动打开浏览器，并访问 http://localhost:8000/ ，你将看到以下页面：

这是开发环境下的 404 页面，因为目前并没有在 pages 下面创建 index.js 。不过没有关系，我们可以通过访问 http://localhost:8000/home 来访问我们创建的 home 页面：

第四步 编辑页面

1. 打开 pages/home.js
   2. 编辑文件

<div className={styles.normal}>
- <h1>Page home</h1>
+ <h1>Welcome to Umi</h1>
</div>

1. 保存文件，回到浏览器查看修改后的页面：

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

代码回顾

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