快速上手

环境准备

首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本）

  1. $ node -v
  2. v10.13.0

推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。

  1. # 国内源
  2. $ npm i yarn tyarn -g
  3. # 后面文档里的 yarn 换成 tyarn
  4. $ tyarn -v
  6. # 阿里内网源
  7. $ tnpm i yarn @ali/yarn -g
  8. # 后面文档里的 yarn 换成 ayarn
  9. $ ayarn -v

脚手架

先找个地方建个空目录。

  1. $ mkdir myapp && cd myapp

通过官方工具创建项目，

  1. $ yarn create @umijs/umi-app
  3. Copy:  .editorconfig
  4. Write: .gitignore
  5. Copy:  .prettierignore
  6. Copy:  .prettierrc
  7. Write: .umirc.ts
  8. Copy:  mock/.gitkeep
  9. Write: package.json
  10. Copy:  README.md
  11. Copy:  src/pages/index.less
  12. Copy:  src/pages/index.tsx
  13. Copy:  tsconfig.json
  14. Copy:  typings.d.ts

安装依赖

  1. $ yarn
  3. yarn install v1.21.1
  4. [1/4] 🔍  Resolving packages...
  5. success Already up-to-date.
  6. ✨  Done in 0.71s.

启动项目

  1. $ yarn start
  3. Starting the development server...
  5. ✔ Webpack
  6.   Compiled successfully in 17.84s
  8.  DONE  Compiled successfully in 17842ms                                       8:06:31 PM
  11.   App running at:
  12.   - Local:   http://localhost:8000 (copied to clipboard)
  13.   - Network: http://192.168.12.34:8000

在浏览器里打开 http://localhost:8000/，能看到以下界面，

快速上手 - 图1

修改配置

默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，

  1. import { defineConfig } from 'umi';
  3. export default defineConfig({
  4. + layout: {},
  5.   routes: [
  6.     { path: '/', component: '@/pages/index' },
  7.   ],
  8. });

不用重启 yarn start，webpack 会在背后增量编译，过一会就可以看到以下界面，

快速上手 - 图2

部署发布

构建

  1. $ yarn build
  3. ✔ Webpack
  4.   Compiled successfully in 17.17s
  6.  DONE  Compiled successfully in 17167ms                                       8:26:25 PM
  8. Build success.
  9. ✨  Done in 20.79s.

构建产物默认生成到 ./dist 下，然后通过 tree 命令查看，

  1. tree ./dist
  3. ./dist
  4. ├── index.html
  5. ├── umi.css
  6. └── umi.js

本地验证

发布之前，可以通过 serve 做本地验证，

  1. $ yarn global add serve
  2. $ serve ./dist
  4.    ┌────────────────────────────────────────────────────┐
  5.    │                                                    │
  6.    │   Serving!                                         │
  7.    │                                                    │
  8.    │   - Local:            http://localhost:5000        │
  9.    │   - On Your Network:  http://192.168.12.34:5000    │
  10.    │                                                    │
  11.    │   Copied local address to clipboard!               │
  12.    │                                                    │
  13.    └────────────────────────────────────────────────────┘

访问 http://localhost:5000，正常情况下应该是和执行 yarn start 时是一致的。

部署

本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。