UMI開源項目

本文主要圍繞UMI是什么及其特征、安裝應用、模板例子等四個方面內容來講解UMI，希望能夠對初學者有所啟發。

一、 UMI是什么

UMI是可插拔的企業級反應應用程序框架。

 

二、 特征

 

特征

• 📦 開箱即用，內置支持反應，反應路由器等。
• 🏈 Next.js喜歡和全功能的路由約定，它也支持配置的路由
• 🎉 完整的插件系統，涵蓋從源代碼到生產的每個生命周期
• 🚀 高性能，通過插件支持PWA，路由級代碼拆分等
• 💈 支持靜態導出，適應各種環境，如控制台應用程序，移動應用程序，雞蛋，支付寶錢包等
• 🚄 快速啟動啟動，支持使用config 啟用dll和hard-source-webpack-plugin
• 🐠 與IE9兼容，基於umi-plugin-polyfills
• 🍁 支持TypeScript，包括d.ts定義和umi test
• 🌴 與dva深度集成，支持duck目錄，自動加載模型，代碼拆分等

 

三、 安裝應用

＃安裝deps 
$ npm install -g umi

＃創建應用程序 
$ mkdir myapp &&  cd myapp

＃創建頁面
$ umi generate page index

 ＃啟動dev服務器

  $ umi dev

控制台正常輸出結果如下:

 

頁面顯示:

 

#構建並部署
$ umi build

控制台輸出如下:

 

 

四、 模板例子

 

除了前面我說的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

控制台顯示如下結果:

 

 

顯示的界面: