UMI開源專案

2022-02-03 00:19:29 字數 1053 閱讀 8463

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

一、 umi是什麼

umi是可插拔的企業級反應應用程式框架。

二、 特徵

特徵

三、 安裝應用

#安裝deps 

$ npm install -g umi

#建立應用程式

#建立頁面

$ umi generate page index

#啟動dev伺服器

$ umi dev

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

頁面顯示:

#構建並部署

$ umi build

控制台輸出如下:

四、 模板例子

除了前面我說的ant design之外還有乙個antd admin

如何執行這個antd admin專案呢?很簡單也就三步。

(1)轉殖專案

git clone  my-project

cd my-project

(2) 安裝依賴

npm install
(3) 執行專案

npm run start
控制台顯示如下結果:

顯示的介面:

umi建立前端專案

umi建立專案 入門級別 建立src pages helloworld.js頁面,umi的預設的頁面路徑 在helloworld.js中新增jsx html js 啟動服務 umi dev 這樣就可以訪問網頁服務了 構建,路徑在dist下 umi build helloworld.js export...

用umi開發專案實戰

建立乙個空資料夾 umi study pages下面有乙個隱藏的.umi資料夾。umi dev 開啟乙個本地伺服器。umi g page user 建立乙個user頁面 根目錄下建立乙個mock資料夾 建立user.js 根目錄下建立乙個layouts資料夾,測試了乙個 也可以是layout,不能是...

umi3js 建立專案

安裝 npm i umi g專案目錄 生成頁面 生成首頁 umi g page index啟動 umi dev再建立乙個頁面about umi g page about動態路由 再建立乙個頁面users id umi g page users id 動態路由取值 export default 巢狀路...