umi 是一個(gè)專注性能的類 next.js 端框架，它的優(yōu)勢是：

• 內(nèi)置大量的性能優(yōu)化
• 多端，無縫支持容器和瀏覽器訪問
• 類 webpack 的插件機(jī)制
• 針對 antd 和 dva 有友好的支持

umi 最顯著的特點(diǎn)就是「文件即路由」——在 pages 文件夾下新建文件，umi 將自動(dòng)生成與文件路徑對應(yīng)的路由。在大部分其他前端框架中，路由配置一直是一個(gè)很麻煩的事情，而對于多人協(xié)作開發(fā)的項(xiàng)目，公共的配置文件則可能面臨著更多的沖突。

作者稱“umi 有著類 webpack 般靈活的插件機(jī)制，他就是一個(gè)架子”。 主要的 umi 項(xiàng)目不到 700 行代碼，umi 負(fù)責(zé)搭好骨架，把框架的生命周期鉤子暴露出來，然后通過插件來豐富功能。

你可以用高達(dá)玩具類比 umi 的可擴(kuò)展性：剛?cè)胧值耐婕铱梢愿鶕?jù)說明書，一步一步地組裝出自己心愛的玩具；對于高玩來說，官方提供了一個(gè)骨架，保證了高達(dá)的可動(dòng)性，然后你自己可以隨意 DIY、任意地使用材料和設(shè)計(jì)方式。

剛接觸前端的同學(xué)可以很好的完成公司的業(yè)務(wù)需求；對前端有一定了解的同學(xué)可以隨意地修改，包括配置、編譯、開發(fā)、模板、請求方式、數(shù)據(jù)流等等，幾乎所有能想到的前端工程化的內(nèi)容，都允許自定義。在一步步接觸這些可配置項(xiàng)的時(shí)候，你也會(huì)一步步對前端工程化更多的認(rèn)識(shí)和理解。

在項(xiàng)目性能方面 umi 已經(jīng)做了很多優(yōu)化，包括構(gòu)建產(chǎn)物的大小、執(zhí)行效率、首屏加載、用戶體驗(yàn)等方面，但這些優(yōu)化對于開發(fā)者是無感知的，有時(shí)候你升級(jí)了一下插件版本，整個(gè)項(xiàng)目可能就跟著優(yōu)化了，而不需要你進(jìn)行其他調(diào)整。作者稱“你只管寫業(yè)務(wù)代碼，我會(huì)負(fù)責(zé)性能，并且隨著 umi 的迭代，我保證你的應(yīng)用會(huì)越來越快”。

umi 的特點(diǎn)

可擴(kuò)展： Umi 實(shí)現(xiàn)了完整的生命周期，并使其插件化，Umi 內(nèi)部功能也全由插件完成。此外還支持插件和插件集，以滿足功能和垂直域的分層需求。
開箱即用： Umi 內(nèi)置了路由、構(gòu)建、部署、測試等，僅需一個(gè)依賴即可上手開發(fā)。并且還提供針對 React 的集成插件集，內(nèi)涵豐富的功能；
完備路由：同時(shí)支持配置式路由和約定式路由，同時(shí)保持功能的完備性，比如動(dòng)態(tài)路由、嵌套路由、權(quán)限路由等等。
兼容性低： 不支持 IE 8 及以下瀏覽器，不支持 React 16.8.0 以下的 React，不支持Node 10 以下的環(huán)境；?

快速上手

環(huán)境準(zhǔn)備

首先得有?node，并確保 node 版本是 10.13 或以上。（mac 下推薦使用?nvm?來管理 node 版本）

$ node -vv10.13.0

推薦使用 yarn 管理 npm 依賴，并使用國內(nèi)源（阿里用戶使用內(nèi)網(wǎng)源）。

國內(nèi)源

$ npm i yarn tyarn -g# 后面文檔里的 yarn 換成 tyarn$ tyarn -v# 阿里內(nèi)網(wǎng)源$ tnpm i yarn @ali/yarn -g# 后面文檔里的 yarn 換成 ayarn$ ayarn -v

腳手架

先找個(gè)地方建個(gè)空目錄。

$ mkdir myapp && cd myapp

通過官方工具創(chuàng)建項(xiàng)目，

$ 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.

啟動(dòng)項(xiàng)目

$ 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

頁面展示

?