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

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

? 開箱即用，內建 react、react-router 等

? 類 next.js 且功能完備的路由約定，同時支援配置的路由方式

? 完善的外掛程式體系，覆蓋從原始碼到構建產物的每個生命週期

? 高效能，通過外掛程式支援 pwa、以路由為單元的 code splitting 等

? 支援靜態頁面匯出，適配各種環境，比如中臺業務、無線業務、egg、支付寶錢包、雲鳳蝶等

? 開發啟動快，支援一鍵開啟 dll 和 hard-source-webpack-plugin 等

? 一鍵相容到 ie9，基於 umi-plugin-polyfills

? 完善的 typescript 支援，包括 d.ts 定義和 umi test

? 與 dva 資料流的深入融合，支援 duck directory、model 的自動載入、code splitting 等等

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/index.js，那麼路由則變為：[,

,] }

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

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

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

這是 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。

別忘了關注我mike啥都想搞

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

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

React框架Umi實戰 3 路由高階

QTP簡單框架 1 之框架簡介

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

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

React框架Umi實戰 3 路由高階

QTP簡單框架 1 之框架簡介

相關推薦