一、序言
最近在学习react，需要为团队搭建一套相关的前端框架。虽然之前的项目中已经使用 create-react-app从0开始搭建过项目，但是我们也知道
create-react-app 是基于 webpack 的打包层方案，包含 build、dev、lint 等，它在打包层把体验做到了极致，但是不包含路由，不是框架，也不支持配置。所以，如果想基于它修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。在此直接使用 umi 文档，参照快速上手进行搭建。
二、 背景知识
首先，这个工程是基于umi去搭建的，umi是基于react去实现的，就要了解web前端三大主流框架之一的React。 React是一个开源的JavaScript库，由Facebook和一个大型开发者社区共同维护。此库(也可转换为web开发框架)广泛用于开发web应用程序的用户界面。这个特殊的框架是为了构建大型应用程序而设计的，这些应用程序的数据会随着时间的推移不断变化。 React的主要功能是对DOM操作，声明式设计，更快的开发出Web应用系统。借助React，你可以非常轻松地创建用户交互界面，为你应用的每一个状态设计简洁的视图。在数据改变时，React也可以高效地更新渲染界面。
umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求
其次，需要知道相关的node知识。
再次，知道相关的webpack知识。
三、 准备工作
1.一台性能可以的电脑。 2.需要支持高版本的浏览器（chrome、firefox） 3.高版本的nodejs，因umi需要跑在 Node 10 以上的环境中
四、开始搭建
1.推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v
2.umi脚手架
// 先找个地方建个空目录。
$ mkdir umi-app && cd umi-app
// 通过官方工具创建项目，
$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app
3.安装依赖
$ yarn install
4.启动项目
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
5.在浏览器打开： 在浏览器里打开 http://localhost:8000/ 能看到以下界面：
6.此时的工程目录：
umi-app
├── README.md
├── mock
├── package.json
├── src
│ └── pages
│ ├── index.less
│ └── index.tsx
├── tsconfig.json
├── typings.d.ts
└── yarn.lock
注：
注：
1. package.json
包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。
2. .umirc.ts
配置文件，包含 umi 内置功能和插件的配置。
3. .env 环境变量。
比如：
PORT=8888
COMPRESS=none
4. dist 目录
执行 umi build 后，产物默认会存放在这里。
mock 目录
存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。
5. public 目录
此目录下所有文件会被 copy 到输出路径。
/src 目录
.umi 目录
临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .umi 目录到 git 仓库，他们会在 umi dev 和 umi build 时被删除并重新生成。
layouts/index.tsx
约定式路由时的全局布局文件。
pages 目录
所有路由组件存放在这里。
7. app.ts
运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。
五、配置工作 配置工作主要有基础配置、运行时的配置、webpack配置、样式和静态文件、环境变量等
六、后记 后续将把配置工作示例化方式出来
