什么是 umi
umi 是由 dva 的开发者 云谦 编写的一个新的 React 开发框架。umi 既是一个框架也是一个工具，可以将它简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少开发者的代码量。
umi 是通用方案，适用于现在几乎所有的 web 环境。
umi 的优势
umi 是一个专注性能的类 next.js 端框架，它的优势是：
- 内置大量的性能优化
- 多端，无缝支持容器和浏览器访问
- 类 webpack 的插件机制
- 针对 antd 和 dva 有友好的支持
umi 最显著的特点就是「文件即路由」——在 pages 文件夹下新建文件，umi 将自动生成与文件路径对应的路由。在大部分其他前端框架中，路由配置一直是一个很麻烦的事情，而对于多人协作开发的项目，公共的配置文件则可能面临着更多的冲突。
umi 的可扩展性
作者称“umi 有着类 webpack 般灵活的插件机制，他就是一个架子”。 主要的 umi 项目不到 700 行代码，umi 负责搭好骨架，把框架的生命周期钩子暴露出来，然后通过插件来丰富功能。
你可以用高达玩具类比 umi 的可扩展性：刚入手的玩家可以根据说明书，一步一步地组装出自己心爱的玩具；对于高玩来说，官方提供了一个骨架，保证了高达的可动性，然后你自己可以随意 DIY、任意地使用材料和设计方式。
刚接触前端的同学可以很好的完成公司的业务需求；对前端有一定了解的同学可以随意地修改，包括配置、编译、开发、模板、请求方式、数据流等等，几乎所有能想到的前端工程化的内容，都允许自定义。在一步步接触这些可配置项的时候，你也会一步步对前端工程化更多的认识和理解。
umi 的性能
在项目性能方面 umi 已经做了很多优化，包括构建产物的大小、执行效率、首屏加载、用户体验等方面，但这些优化对于开发者是无感知的，有时候你升级了一下插件版本，整个项目可能就跟着优化了，而不需要你进行其他调整。作者称“你只管写业务代码，我会负责性能，并且随着 umi 的迭代，我保证你的应用会越来越快”。
umi 的特点
可扩展： Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
开箱即用： Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能；
完备路由：同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
兼容性低： 不支持 IE 8 及以下浏览器，不支持 React 16.8.0 以下的 React，不支持Node 10 以下的环境；
快速上手
环境准备
首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本）
$ node -v v10.13.0
推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。
国内源
$ npm i yarn tyarn -g # 后面文档里的 yarn 换成 tyarn $ tyarn -v # 阿里内网源 $ tnpm i yarn @ali/yarn -g # 后面文档里的 yarn 换成 ayarn $ ayarn -v
脚手架
先找个地方建个空目录。
$ mkdir myapp && cd myapp
通过官方工具创建项目，
$ 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
页面展示
