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

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

1 特性

📦 開箱即用，內置 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 等等

2 使用腳手架

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 可看到以下界面，

3 約定目錄介紹

腳手架自動生成了一些目錄，你需要按約定的方式去寫，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統一管理。就看你喜歡什麼樣的管理方式了。

dist

默認輸出路徑，可通過配置 outputPath 修改。

mock

約定 mock 目錄裏所有的 .js 文件會被解析爲 mock 文件。

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

export default {
'/api/users': ['a', 'b'],
}
然後在瀏覽器裏訪問 http://localhost:8000/api/users 就可以看到 ['a', 'b'] 了。

src

約定 src 爲源碼目錄，但是可選，簡單項目可以不加 src 這層目錄。

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

• src

  • pages

    • index.js

  • layouts

    • index.js
• .umirc.js

• pages

  • index.js

• layouts

  • index.js
• .umirc.js

src/layouts/index.js

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

比如，你的路由是：

[
{ path: '/', component: './pages/index' },
{ path: '/users', component: './pages/users' },
]
如果有 layouts/index.js，那麼路由則變爲：

[
{ path: '/', component: './layouts/index', routes: [

{ path: '/', component: './pages/index' },
{ path: '/users', component: './pages/users' },

] }
]

src/pages

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

src/pages/404.js

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

src/pages/document.ejs

有這個文件時，會覆蓋默認的 HTML 模板。需至少包含以下代碼，

<div id="root"></div>

src/pages/.umi

這是 umi dev 時生產的臨時目錄，默認包含 umi.js 和 router.js，有些插件也會在這裏生成一些其他臨時文件。可以在這裏做一些驗證，但請不要直接在這裏修改代碼，umi 重啓或者 pages 下的文件修改都會重新生成這個文件夾下的文件。

src/pages/.umi-production

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

.test.js 和 .e2e.js

測試文件，umi test 會查找所有的 .(test|e2e).(j|t)s 文件跑測試。

src/global.(j|t)sx?

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

src/global.(css|less|sass|scss)

這個文件不走 css modules，自動被引入，可以寫一些全局樣式，或者做一些樣式覆蓋。

.umirc.js 和 config/config.js

umi 的配置文件，二選一。

.env

環境變量，比如：

CLEAR_CONSOLE=none
BROWSER=none

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

4 使用命令創建一個新的頁面

進入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。