React框架Umi實戰 1 簡介與使用腳手架

2021-09-24 08:15:20 字數 3234 閱讀 1254

之前寫完了dva入門系列,它只是乙個純粹的資料流框架,拿來開發是沒有問題的.但是還是有一些繁瑣的步驟,每次要手動註冊model,手寫route路由.umi的出現結合dva,使得開發更加的優雅與便捷.

1.安裝umi

npm install -g umi


複製**
2.檢查

umi -v


複製**
3.安裝腳手架

npm install -g create-umi


複製**
4.使用腳手架初始化工程

create-umi


複製**
選擇》project,然後選擇依賴,這節課先選擇antd,不選擇dva. 5.執行專案 進入專案目錄,先安裝依賴，然後執行

npm install


npm start


複製**
6.瀏覽器訪問 如果順利，在瀏覽器開啟 http://localhost:8000 可看到以下介面，

腳手架自動生成了一些目錄，你需要按約定的方式去寫，umi才能正常執行乙個複雜應用的目錄結構如下：

.


├── dist/                          // 預設的 build 輸出目錄


├── mock/                          // mock 檔案所在目錄，基於 express


├── config/


├── config.js                  // umi 配置，同 .umirc.js，二選一


└── src/                           // 原始碼目錄，可選


├── layouts/index.js           // 全域性布局


├── pages/                     // 頁面目錄，裡面的檔案即路由


├── .umi/                  // dev 臨時目錄，需新增到 .gitignore


├── .umi-production/       // build 臨時目錄，會自動刪除


├── document.ejs           // html 模板


├── 404.js                 // 404 頁面


├── page1.js               // 頁面 1，任意命名，匯出 react 元件


├── page1.test.js          // 用例檔案，umi test 會匹配所有 .test.js 和 .e2e.js 結尾的檔案


└── page2.js               // 頁面 2，任意命名


├── global.css                 // 約定的全域性樣式檔案，自動引入，也可以用 global.less


├── global.js                  // 可以在這裡加入 polyfill


├── .umirc.js                      // umi 配置，同 config/config.js，二選一


├── .env                           // 環境變數


└── package.json


複製**
敲黑板，知識點： umi是按page來劃分的，每乙個page裡只有自己的model，service，util等。不像dva的目錄結構，所有的model，service，page統一管理。就看你喜歡什麼樣的管理方式了。

預設輸出路徑，可通過配置 outputpath 修改。

約定 mock 目錄裡所有的 .js 檔案會被解析為 mock 檔案。

比如，新建 mock/users.js，內容如下：

export default

約定 src 為原始碼目錄，但是可選，簡單專案可以不加 src 這層目錄。

比如：下面兩種目錄結構的效果是一致的。

layouts

layouts

全域性布局，實際上是在路由外面套了一層。

比如，你的路由是：

[ , , ] 如果有 layouts/index.js，那麼路由則變為：

[ , , ] } ]

約定 pages 下所有的 (j|t)sx? 檔案即路由。關於更多關於約定式路由的介紹，請前往路由章節。

404 頁面。注意開發模式下有內建 umi 提供的 404 提示頁面，所以只有顯式訪問 /404 才能訪問到這個頁面。

有這個檔案時，會覆蓋預設的 html 模板。需至少包含以下**，

"root">


複製**
這是 umi dev 時生產的臨時目錄，預設包含 umi.js 和 router.js，有些外掛程式也會在這裡生成一些其他臨時檔案。可以在這裡做一些驗證，但請不要直接在這裡修改**，umi 重啟或者 pages 下的檔案修改都會重新生成這個資料夾下的檔案。

同 src/pages/.umi，但是是在 umi build 時生成的，會在 umi build 執行完自動刪除。

測試檔案，umi test 會查詢所有的 .(test|e2e).(j|t)s 檔案跑測試。

在入口檔案最前面被自動引入，可以考慮在此加入 polyfill。

這個檔案不走 css modules，自動被引入，可以寫一些全域性樣式，或者做一些樣式覆蓋。

umi 的配置檔案，二選一。

環境變數，比如：

clear_console=none


browser=none


複製**
主要注重page目錄就行了，其他的在你入門學習過程中可能都用不到。

進入src目錄，執行命令

umi g page users


複製**
這樣在pages目錄下會生成新的users頁面，瀏覽器訪問http://localhost:8000/users：

除了生成頁面，還有別的命令

umi g 是 umi generate 的別名，可用於快速生成 component、page、layout 等，並且可在外掛程式裡被擴充套件，比如 umi-plugin-dva 裡擴充套件了 dva:model，然後就可以通過 umi g dva:model foo 快速 dva 的 model。

React框架Umi實戰 1 簡介與使用腳手架

之前寫完了dva入門系列,它只是乙個純粹的資料流框架,拿來開發是沒有問題的.但是還是有一些繁瑣的步驟,每次要手動註冊model,手寫route路由.umi的出現結合dva,使得開發更加的優雅與便捷.開箱即用，內建 react react router 等 類 next.js 且功能完備的路由約定，同...

React框架Umi實戰 3 路由高階

前面的課程都是使用的約定路由，就是自動生成的，但是我們做專案大部分都是涉及許可權控制的，這時就還是得用控制路由，僅今天就來改進一下 ref export default dynamicimport false,title umis dll false,hardsource false,routes ...

QTP簡單框架 1 之框架簡介

很明顯qtp預設生成的每個空的物件庫檔案為192k，這樣乙個空的qtp指令碼檔案就至少需要500k左右的空間 action0和action1 如果分割的action多的話，占用的空間就更多。的重用 相信有許多這樣的朋友 例如需要寫一段讀取excel檔案的qtp 直接google複製貼上，然後以後編寫...