umi框架搭建

环境准备

首先由node环境，确保node版本是10.13或以上（mac下推荐使用nvm来管理node版本）

$ node -v
v14.8.0

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

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

脚手架

先找个地方建个空目录。

$ mkdir umi-react && cd umi-react

通过官方工具创建项目

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app
Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

安装依赖

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

启动项目

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

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

TB1JpeLwxD1gK0jSZFsXXbldVXa-1540-950.png