umi -- 用官方推薦腳手架安裝 umi 來初始化 React 項目

umi官網地址

官方推薦腳手架創建項目

首先，你安裝好了node，且確保 node 版本是 10.13 或以上。
最好用 yarn 安裝 umi
yarn 可以直接通過 npm 安裝：$ npm install -g yarn

前言：

經過第四次嘗試，感覺這回比較靠譜，建議大家以后直接看官網，稍微靠譜點，可以少踩很多坑。
第一行有官網地址。
發現以前的 umi/Link 和 umi/router 不能用，在第五步有介紹如何填的坑

一.安裝步驟：

1. $ mkdir myapp && cd myapp
   $ yarn create umi
2. 選擇project（項目）
   本項目選擇 app
3. 選擇是否使用 TypeScript，
   本項目選擇 N
4. 選擇需要的功能
   本項目選擇 antd、dva
5. 安裝依賴 （這一步需要較長時間）
   $ yarn
6. 啟動本地開發
   $ yarn start

二.配置插件

根目錄下的 .umirc.js 是整個應用的配置文件，上面提到的插件也可以在這里配置
配置項可以寫在 .umirc.js 文件中，也可以寫在 config/config.js 文件中，**二者只有一個生效 **
完整的配置項可以參考文檔，這里介紹幾個比較實用的配置項：

1. proxy (代理）

const HOST_URL = '';
export default {
  proxy: {
    '/api': {
      target: HOST_URL,
      changeOrigin: true,
      pathRewrite: { '/api': '' },
    },
    /*
      // 配置proxy解決跨域問題
      // 本地8000發送請求http://localhost:8000/api/data請求的數據其實是http://localhost:9093/data
      // 舉例:
      '/api': {
        target: 'http://localhost:9093',
        pathRewrite: { '^/api': '' },
        changeOrigin: true
      }
    */
  },
}

2. theme （主題）

全局配置 less 變量（umi 項目默認使用 less）

export default {
  theme: {
    'primary-color': '#3385ff',
    'font-size-base': '14px',
  },
}

然后在 less 文件頂部引入

@import '~antd/lib/style/themes/default.less';

就能直接使用配置的 theme 變量了

3. routes （路由）

umi 會基於約定的 pages 目錄自動生成路由。
找到根目錄的 .umirc.js 文件，其中的 routes 屬性，就是用來配置路由的。
如果更傾向於使用配置路由，可以用配置文件【config/config.js】代替 .umirc.js 文件【需要刪除.umirc.js】，再中單獨配置 routes。
當然你可以單獨寫個 router.js 文件，然后引入使用。

export default {
  routes: [
    // { path: '/', component: '../pages/index', redirect: "/firstPage" }, // 路由重定向 redirect
    { path: '/', component: './pages/index' },
    { path: '/list', component: './pages/list/index', Routes: ['./routes/PrivateRoute.js'] },
    { path: '/users', component: './users/_layout',
      routes: [
        { path: '/users/detail', component: './users/detail' },
        { path: '/users/:id', component: './users/id' }
      ]
    },
    // { path: "/*", component: "../pages/404/" } // 寫在最后一排，非正確路徑，顯示404頁面
  ],
};

配置項中的 component 路徑是從 src/pages 目錄開始解析的
⚠️注意：routes 配置項存在時則不會對 src/pages 目錄做約定式的解析，即約定式路由無法生效

4.alias （別名）

可以配置 webpack 的 resolve.alias 屬性

alias: {
  '@': require('path').resolve(__dirname, './src'),
  '@components': require('path').resolve(__dirname, './src/components'),
},

配置之后在 import 的時候可以使用快捷路徑

另外根目錄下有一個 webpack.config.js，這里也有配置 alias，但這里的 alias 不會在項目中生效

5.devServer （開發者服務器）

官方文檔上說可以配置 devServer

但實際上直接配置 devServer 是無效的

而圖上提到的 https、port 等需要使用 .env 文件來配置環境變量

BROWSER=none
ESLINT=1
PORT=9000  // 自定義本地服務端口

這里定義的系統環境變量在整個 umi-build-dev 的生命周期里都可以被使用

三.約定目錄：

umi 對於項目中的目錄有嚴格的約定，路由、model 都是基於目錄結構實現

├── 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
    ├── app.js        // 運行時配置文件
├── .umirc.js        // umi 配置，同 config/config.js，二選一
├── .env            // 環境變量
├── .gitignore        // 避免將不必要的代碼提交到 git 倉庫中
└── package.json

以上的目錄除了 pages 下面的自定義頁面文件以外，都不可以重命名

如果需要給整個項目添加一個靜態 HTML 模版，可以新建一個 src/pages/document.ejs 文件

但這個 document.ejs 文件必須包含 <div id="root"></div>

四.路由與頁面跳轉

如果采用約定式路由，pages 目錄下的頁面需要嚴格遵守相關規范
具有 $ 前綴的頁面會被識別為動態路由

pages/users/$id.js
-> path: '/users/:id'

同時具備 $ 前綴和后綴的頁面會被識別為可選的動態路由

pages/users/$id$.js
-> path: '/users/:id?'

當目錄下存在 _layout.js 文件時，會以 _layout.js 作為基礎頁面生成嵌套路由

+ 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' },
   ],
  },
]

在頁面中可以通過 umi/router 提供的 API 跳轉頁面

import { router } from 'umi';

export default () => (
  <button onClick={() => router.push("/firstPage")} >toFirstPage</button>
);

或者使用 umi/link 作為組件跳轉

import { Link } from 'umi'

export default () => (
  <Link to="/secondPage">toSecondPage</Link>
);

五.解決的坑：

5.1 系統提示，找不到 'umi/router' 和 'umi/Link' 。

1. 2020-7-16
   現在用不了 import Link from 'umi/link';，
   趕緊上網找，說這種方式過時了，現在得這樣：
   import { Link } from 'umi'
2. 2020-7-17
   現在用不了 import router from 'umi/router';
   查了整個 umi，是個 Module 對象，里面找到兩個方法 router 對象
   所以：import { router } from "umi";
   之后的使用就一樣啦。(^▽)

5.2 設置多個樣式的方法：<div className={`${styles.game_item_icon} ${onOff ? styles.selected : ""}`} >

六.umi + dva 的一些重要概念

1. 在dva中主要分3層，models, services, components,

• 其中models是最重要概念，這里放的是各種數據，與數據交互的應該都是在這里。
• services是請求后台接口的方法。
• components是組件了。

2. dva 的五個核心元素：

• State：一個對象，保存整個應用狀態
• View：React 組件構成的視圖層
• Action：一個對象，描述事件
• connect 方法：一個函數，綁定 State 到 View
• dispatch 方法：一個函數，發送 Action 到 State

3. 在 Dva 中，State 是儲存數據的地方，我們通過 dispatch 觸發 Action，然后更新 State。
   如果有 View 使用 connect 綁定了 State，當 State 更新的時候，View 也會更新。

七.相關文章鏈接

umi -- model 的注冊與使用

umi -- 震驚！umi 路由竟然如此強大！

文章摘自網絡多篇文章整合，僅供本人學習記憶，如有侵權，請聯系刪除。

本文大部分內容摘自作者：Wise.Wrong ，鏈接：https://www.cnblogs.com/wisewrong/p/12160671.html