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 等等css

2 使用腳手架

1.安裝umireact

npm install -g umi

2.檢查webpack

umi -v

3.安裝腳手架git

npm install -g create-umi

4.使用腳手架初始化工程web

create-umi

選擇>project,而後選擇依賴,這節課先選擇antd,不選擇dva.
5.運行項目
進入項目目錄,先安裝依賴,而後運行express

npm install
npm start

6.瀏覽器訪問
若是順利,在瀏覽器打開 http://localhost:8000 可看到如下界面,
YIFycZRnWWeXBGnSoFoT.pngnpm

3 約定目錄介紹

腳手架自動生成了一些目錄,你須要按約定的方式去寫,umi才能正常運行一個複雜應用的目錄結構以下:json

.
├── 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統一管理。就看你喜歡什麼樣的管理方式了。api

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:
users

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

umi g 是 umi generate 的別名,可用於快速生成 component、page、layout 等,而且可在插件裏被擴展,好比 umi-plugin-dva 裏擴展了 dva:model,而後就能夠經過 umi g dva:model foo 快速 dva 的 model。
相關文章
相關標籤/搜索