網(wǎng)站建設(shè)座談會(huì)上的發(fā)言寧波pc營銷型網(wǎng)站制作
什么是 umi
umi 是由 dva 的開發(fā)者 云謙 編寫的一個(gè)新的 React 開發(fā)框架。umi 既是一個(gè)框架也是一個(gè)工具,可以將它簡單的理解為一個(gè)專注性能的類 next.js 前端框架,并通過約定、自動(dòng)生成和解析代碼等方式來輔助開發(fā),減少開發(fā)者的代碼量。
umi 是通用方案,適用于現(xiàn)在幾乎所有的 web 環(huán)境。
umi 的優(yōu)勢
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 的可擴(kuò)展性
作者稱“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í)和理解。
umi 的性能
在項(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
頁面展示
?