一、概念：https://pro.ant.design/docs/getting-started-cn（官方網站）
1、Ant Design Pro 是什么： https://www.cnblogs.com/freely/p/10874297.html
Ant Design Pro 是一套開箱即用的中台前端/設計解決方案，是一個開發 中后台 系統的 腳手架。類似 vue-cli 一樣，創建項目后，各種webpack配置、路由配置等，都已經弄好，直接開發就可以了。
2、Ant Design Pro 相關的技術棧： react+redux+dva+antd+fetch+roadhog
主要還是dva比較難理解，fetch 就 另外一種 ajax
二、安裝： 兩種安裝方法
擴展介紹：官網教程中 安裝用到了 npm create umi 命令。 npm create 命令是什么呢，create 是 install 的別名。 https://zhuanlan.zhihu.com/p/77454212
但是經過實踐，個人感覺是調用 npx install umi，然后在調用git命令。
方法一：按照官網的步驟：
npm create umi // cd create // 安裝時，直接創建create 項目目錄 npm install // 安裝依賴 npm start // 啟動應用
方法二： npm create umi 的本質，還是調用 git 命令到git倉庫上下載代碼。調用npm create umi命令后, 自動調用 git clone https://github.com/ant-design/ant-design-pro --depth=1 這個git命令 。
所以我們可以直接調用git命令，而不用安裝 umi。 git clone https://github.com/ant-design/ant-design-pro --depth=1 是 JavaScript模式下的倉庫，typescript模式下的倉庫個人不用就不去介紹了。
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project
經過實踐發現：還是方案一 更好，會把一些沒用的文件，清理掉的；方案二 會多一些沒用的文件出來
三、部署和構建
1、環境變量：https://pro.ant.design/docs/environment-variables-cn
環境變量是 ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION
2、構建 和 部署： 閱讀 https://pro.ant.design/docs/build-cn
a。路由是 browserHistory 模式的話，服務器必須要配置。不然對應的路由，在服務器是找不到這個資源的。下面以 nginx 服務器部署為例：
location / {
root E:\代碼倉庫\create\dist;
index index.html;
# 用於配合 browserHistory使用
try_files $uri $uri/ /index.html;
}
四、區塊 開發 （重點） https://pro.ant.design/docs/block-cn
1、使用 模板 可以 自動創建 路由頁面 並且配置路由。（模板代表一個頁面） 如下圖，可以自定義，創建一個模板頁面。
2、 使用區塊開發 可以 自動添加 需要的 antD 中的組件。（區塊可以類比為一個組件） 如下圖，將需要的 組件，添加到頁面中，指定的位置上。
五、路由和菜單
1、路由管理： 通過約定的語法，在 config.ts 中配置路由。https://pro.ant.design/docs/router-and-nav-cn
a、路由菜單可以從服務器獲取
2、菜單生成： 根據路由配置 會自動生成菜單。菜單項名稱，嵌套路徑與路由高度耦合。
3、面包屑： 組件 PageHeaderWrapper 中內置的面包屑,也可通過 RouteContext 提供的信息自定義生成。
4、路由中 幾個 layouts 組件（UI組件 和 業務組件）： （開發時，頁面的入口就是從路由開始的）
a、SecurityLayout （功能組件）：分析代碼，這個 應該是判斷用戶是否 登入的組件。
b、 BasicLayout ：基礎頁面布局，包含了頭部導航，側邊欄和通知欄：
c、 UserLayout：抽離出用於登錄注冊頁面的通用布局
d、 BlankLayout：這個空白 頁面。這個組件沒什么用。
六、布局 (路由的 UI 組件) https://pro.ant.design/docs/layout-cn/
說明：不同的頁面 在路由中 可以 選擇 在 需要的那種布局下。
1、BasicLayout：基礎頁面布局，包含了頭部導航，側邊欄和通知欄：
2、UserLayout：抽離出用於登錄注冊頁面的通用布局
3、BlankLayout：空白的布局
七、新增頁面
1、pages目錄下新建文件
2、將文件加入菜單和路由
3、新增 model、service：非必須，如果需要用到 dva 中的數據流，才要創建。
八、Pro 的 Layout 組件（幾個組件集合）： https://pro.ant.design/docs/layout-component-cn
注意，不是antD 的Layout 組件
a、ProLayout 組件：路由中 BasicLayout 組件的核心 UI組件。實現左邊菜單，頭部的header 布局。
b、PageHeaderWrapper ：頁頭組件。快速實現 面包屑和標題。
c、SettingDrawer ： SettingDrawer 提供了一個圖形界面來設置 layout 的配置，方便在演示環境中展示 Layout 的所有能力。正式環境這個東西一般是要去掉的。
d、DefaultFooter ：頁尾 組件。快速實現 頁尾 內容。
九、頁面設置樣式 https://pro.ant.design/docs/style-cn
1、基於 less 開發，具體的使用參考上面鏈接。
十、和服務器端交互
1、
十一、Mock 和 聯調
十二、更換主題
1、主題定制：
2、在線切換主題（重點）：https://pro.ant.design/docs/theme-cn#%E5%9C%A8%E7%BA%BF%E5%88%87%E6%8D%A2%E4%B8%BB%E9%A2%98
這個是 左邊菜單和 頁頭固定的配置。 文檔上的說的文件路徑是錯誤的（可能文檔沒有實時更新）。正確的配置路徑是 config/defaultSettings.js
十三、權限管理 https://pro.ant.design/docs/authority-management-cn
這個 文檔 還是比較清晰的
實踐總結：
1、 固定左邊菜單和 頁頭固定：
修改 配置 文件 config/defaultSettings.js 就可以實現
2、創建 mock數據：
只要在 mock 目錄下的文件，有對應的 接口的匹配就可以了。不需要，在某個文件中引入相應的文件。腳手架中會自動把 mock下的所有文件進行執行的。
3、配置 代理 服務器： 在 config/config.js 中配置
注意：mock 和 代理都 可以匹配的話，請求接口 會 走 mock 數據，代理的真實請求就沒有想過。 關閉mock數據，或者 mock數據不能匹配對應的接口，就可以走代理請求，獲取真實的數據。
4、菜單 中文配置：
配置好路由，默認的菜單名稱是英文的。要設置成中文的，需要在 src\locales\zh-CN\menu 中配置。
5、頭部右邊的內容，通過 BasicLayout.jsx 這個布局入口文件就可以找到，這部分內容所在的文件。
import RightContent from '@/components/GlobalHeader/RightContent';
6、 antD pro 安裝 的項目，有一些對我們沒有用的功能。需要刪除掉。
dva 教程 https://dvajs.com/guide/introduce-class.html
說明：dva 首先是一個基於 redux 和 redux-saga 的數據流方案，然后為了簡化開發體驗
一、Model 對象：dva整個知識體系太多，設計中主要會用就可以了。在antd pro中，modes是放在一個目錄下統一管理的，導出一個 model 對象，對象的選項如下：
1、namespace：當前 Model 的名稱
2、state：該 Model 當前的狀態
3、reducers：Action 處理器，處理同步動作，用來算出最新的 State
4、effects：Action 處理器，處理異步動作
二、使用：
1、設置 dva 的 state：通過 dispatch 觸發 修改。
dispatch({ type: 'products/delete', payload: id, });
2、獲取修改后的數據：
dispatch({
type: 'products/delete',
payload: id,
});