本文主要圍繞UMI是什麼及其特徵、安裝應用、模板例子等四個方面內容來說解UMI，但願可以對初學者有所啓發。html
1、 UMI是什麼react
UMI是可插拔的企業級反應應用程序框架。webpack
2、 特徵git
特徵github
- 📦 開箱即用，內置支持反應，反應路由器等。
- 🏈 Next.js喜歡和全功能的路由約定，它也支持配置的路由
- 🎉 完整的插件系統，涵蓋從源代碼到生產的每一個生命週期
- 🚀 高性能，經過插件支持PWA，路由級代碼拆分等
- 💈 支持靜態導出，適應各類環境，如控制檯應用程序，移動應用程序，雞蛋，支付寶錢包等
- 🚄 快速啓動啓動，支持使用config 啓用dll和hard-source-webpack-plugin
- 🐠 與IE9兼容，基於umi-plugin-polyfills
- 🍁 支持TypeScript，包括d.ts定義和umi test
- 🌴 與dva深度集成，支持duck目錄，自動加載模型，代碼拆分等
3、 安裝應用web
＃安裝deps $ npm install -g umi ＃建立應用程序 $ mkdir myapp && cd myapp ＃建立頁面 $ umi generate page index
＃啓動dev服務器npm
$ umi dev服務器
控制檯正常輸出結果以下:antd
頁面顯示:app
#構建並部署 $ umi build
控制檯輸出以下:
4、 模板例子
除了前面我說的Ant Design以外還有一個AntD Admin
如何運行這個AntD Admin項目呢？很簡單也就三步。
(1)克隆項目
git clone https://github.com/zuiidea/antd-admin.git my-project cd my-project
(2) 安裝依賴
npm install
(3) 運行項目
npm run start
控制檯顯示以下結果:
顯示的界面: