Umi框架

什么是 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 -vv10.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-appCopy: .editorconfigWrite: .gitignoreCopy: .prettierignoreCopy: .prettierrcWrite: .umirc.tsCopy: mock/.gitkeepWrite: package.jsonCopy: README.mdCopy: src/pages/index.lessCopy: src/pages/index.tsxCopy: tsconfig.jsonCopy: typings.d.ts

安装依赖

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

启动项目

$ yarn startStarting the development server...✔ WebpackCompiled successfully in 17.84sDONE Compiled successfully in 17842ms 8:06:31 PMApp running at:- Local: http://localhost:8000 (copied to clipboard)- Network: http://192.168.12.34:8000

页面展示