环境准备

首先得有 node，并确保 node 版本是 8.10 或以上。
推荐使用 yarn 管理 npm 依赖。
然后全局安装 umi，并确保版本是 2.0.0 或以上。

$ yarn global add umi
$ umi -v
2.12.7

提示：如果提示 umi: command not found，你需要执行 yarn global bin，然后把 global bin 的路径添加到环境变量 PATH 中。方法如下：

# mac 系统:
$ sudo vi ~/.bash_profile
# 在 .bash_profile 中添加下面一行：
export PATH="$PATH:`yarn global bin`"

# windows系统:
# 获取 global bin 的路径
$ yarn global bin
C:\Users\Administrator\AppData\Local\Yarn\bin
# 复制上面的 global bin 的路径，添加到系统环境变量 PATH。

umi 通过 create-umi 提供脚手架能力

新建文件夹并进入文件夹

$ mkdir umi-demo && cd umi-demo
$ yarn create umi

选择project：

? Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with a layout-only ant-design-pro boilerplate
, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript
.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

选择是否使用TypeScript：

? Do you want to use typescript? (y/N)  Y

脚手架会自动创建项目并生成相应文件目录

运行项目

下载依赖

$ yarn

依赖下下完成后就可以运行代码了

$ yarn start

结束

至此，一个简单的前端项目框架就搭建完成了，由于直接使用了官网的脚手架搭建项目，项目初次运行会有自带的api请求，这时根据自身需求使用更多技术开发项目，根据需求调整框架。

在框架的基础上微调登录页面

先上页面（没有写样式，直接使用ant-design-pro的组件）

image.png

没有连接数据库和联调接口，数据是由前端写死的，这里可以使用mock模拟接口

这里描述一下，如何在搭好的框架上开始修改内容：
umi的项目，主要就是路由控制页面的跳转，所以一定要先找到项目的路由配置（在config -> config.ts文件中）

image.png
代码地址