umi+dva+antd項目操做手冊

項目初始化

僅在開始構建的時候用到，後續直接git拉取項目模板代碼便可

環境準備

node版本：v8.11.2

npm版本：5.6.0

umi：2.7.3

安裝全局依賴(當前版本2.7.3)

npm install -g umi複製代碼

create-umi：0.13.4

安裝umi腳手架工具(當前版本0.13.4)

npm install -g create-umi複製代碼

初始化項目

進入項目目錄使用命令：

create-umi 或者 create-umi [appName]複製代碼

1. 選擇App
2. 不適用typescript
3. 按空格分別選擇dva和antd
4. 安裝完成以後運行

   npm install複製代碼

運行項目

執行命令

npm start 複製代碼

效果如圖所示：

UMI路由約定

基礎路由

約定 pages 下全部的 js、jsx、ts 和 tsx 文件即路由,umi 會自動生成路由。

動態路由

umi 里約定，帶 $ 前綴的目錄或文件爲動態路由。

+ pages/
  + $post/
    - index.js
    - comments.js
  + users/
    $id.js
  - index.js複製代碼

會生成路由配置以下：

[
  { path: '/', component: './pages/index.js' },
  { path: '/users/:id', component: './pages/users/$id.js' },
  { path: '/:post/', component: './pages/$post/index.js' },
  { path: '/:post/comments', component: './pages/$post/comments.js' },
]複製代碼

可選的動態路由

umi 里約定動態路由若是帶 $ 後綴，則爲可選動態路由。

好比如下結構：

+ pages/
  + users/
    - $id$.js
  - index.js
複製代碼

會生成路由配置以下：

[
  { path: '/': component: './pages/index.js' },
  { path: '/users/:id?': component: './pages/users/$id$.js' },
]複製代碼

嵌套路由

umi 里約定目錄下有 _layout.js 時會生成嵌套路由，以 _layout.js 爲該目錄的 layout 。

好比如下目錄結構：

+ pages/
  + users/
    - _layout.js
    - $id.js
    - index.js
複製代碼

會生成路由配置以下：

[
  { path: '/users', component: './pages/users/_layout.js',
    routes: [
     { path: '/users/', component: './pages/users/index.js' },
     { path: '/users/:id', component: './pages/users/$id.js' },
   ],
  },
]複製代碼

404 路由

約定 pages/404.js 爲 404 頁面，需返回 React 組件。

好比：

export default () => {
  return (
    <div>I am a customized 404 page</div>
  );
};
複製代碼

注意：開發模式下，umi 會添加一個默認的 404 頁面來輔助開發，但你仍然可經過精確地訪問 /404 來驗證 404 頁面。

UMI通用母版頁約定

全局 layout

約定 src/layouts/index.js 爲全局路由，返回一個 React 組件，經過 props.children 渲染子組件。

好比：

export default function(props) {
  return (
    <>
      <Header />
      { props.children }
      <Footer />
    </>
  );
}
複製代碼

不一樣的全局 layout

你可能須要針對不一樣路由輸出不一樣的全局 layout，umi 不支持這樣的配置，但你仍能夠在 layouts/index.js 對 location.path 作區分，渲染不一樣的 layout 。

好比想要針對 /login 輸出簡單佈局，

export default function(props) {
  if (props.location.pathname === '/login') {
    return <SimpleLayout>{ props.children }</SimpleLayout>
  }

  return (
    <>
      <Header />
      { props.children }
      <Footer />
    </>
  );
}複製代碼

UMI-dva-model約定

model 分兩類，一是全局 model，二是頁面 model。全局 model 存於 /src/models/ 目錄，全部頁面均可引用；頁面 model 不能被其餘頁面所引用。

規則以下：

• src/models/**/*.js 爲 global model
• src/pages/**/models/**/*.js 爲 page model
• global model 全量載入，page model 在 production 時按需載入，在 development 時全量載入
• page model 爲 page js 所在路徑下 models/**/*.js 的文件
• page model 會向上查找，好比 page js 爲 pages/a/b.js，他的 page model 爲 pages/a/b/models/**/*.js + pages/a/models/**/*.js，依次類推
• 約定 model.js 爲單文件 model，解決只有一個 model 時不須要建 models 目錄的問題，有 model.js 則不去找 models/**/*.js

舉個例子，

+ src
  + models
    - g.js
  + pages
    + a
      + models
        - a.js
        - b.js
        + ss
          - s.js
      - page.js
    + c
      - model.js
      + d
        + models
          - d.js
        - page.js
      - page.js
複製代碼

如上目錄：

• global model 爲 src/models/g.js
• /a 的 page model 爲 src/pages/a/models/{a,b,ss/s}.js
• /c 的 page model 爲 src/pages/c/model.js
• /c/d 的 page model 爲 src/pages/c/model.js, src/pages/c/d/models/d.js

UMI操做相關

1. 頁面跳轉

   // 聲明式
   import Link from 'umi/link';
   
   export default () => (
     <Link to="/list">Go to list page</Link>
   );
   
   // 命令式
   import router from 'umi/router';
   
   function goToListPage() {
     router.push('/list');
   }
   
   複製代碼

2. 端口配置 .env文件

   BROWSER=none
   ESLINT=1
   PORT=8001複製代碼

其餘說明：

1. src/global.css 此文件不走 css modules，且會自動被引入，能夠在這裏寫全局樣式，以及作樣式覆蓋。