快速上手

安装

用 yarn 安装 umi ：

$ yarn global add umi

或者用 npm ：

$ npm install -g umi

用 umi -v 检查版本号。

$ umi -v
umi@1.0.0

创建应用

WARNING

umi 暂时没有提供脚手架，之后会添加。

创建应用并进入。

$ mkdir myapp
$ cd myapp

创建第一个页面

创建 pages 目录并新建一个页面。

$ mkdir pages
$ echo 'export default () => <div>Index Page</div>' > pages/index.js

如果你是 Window 系统，可以手动新建 pages/index.js，并填入：

export default () => <div>Index Page</div>;

启动 dev 服务器

$ umi dev
Compiled successfully!
You can now view Your App in the browser.
  Local:            http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.

然后在浏览器中打开 http://localhost:8000/，你会看到 Index Page 。

构建应用

$ umi build
Compiled successfully.
File sizes after gzip:
  52.09 KB  static/umi.2b7e5e82.js
  186 B     static/__common-umi.6a75ebe1.async.js

构建产物会生成在 dist 目录。

$ tree ./dist
dist
├── index.html
└── static
    ├── __common-umi.6a75ebe1.async.js
    └── umi.2b7e5e82.js
1 directory, 3 files

部署

构建产出的 dist 目录是可直接运行的，我们用 serve 让 dist 目录跑起来。

$ npm i serve -g
$ cd dist
$ serve
Serving!
- Local:            http://localhost:5000   
- On Your Network:  http://{Your IP}:5000
Copied local address to clipboard!

原文: https://v1.umijs.org/guide/getting-started.html