【前言】
找了很多Admin模板，最后還是看中了AntDesignPro這個阿里巴巴開源的Admin框架，長這樣（還行吧，目前挺主流的）：
官網地址：https://pro.ant.design/index-cn
該套模板是使用了React開發框架作為基礎，AntDesign（螞蟻金服開源UI組件庫）作為UI庫，集成了Dva，Umi，Mock等庫，如果不是很了解這些內容，門檻還是比較高的，下面我們梳理一下從零開始運行起來這個項目的過程。
【准備環境】
- node js 安裝最新版即可
我的nodejs版本 v12.18.3 - npm npm服務器在國外，訪問比較慢，可以更換成國內源：
npm config set registry https://registry.npm.taobao.org
當然也可以安裝cnpm（采用的國內源），使用時需要npm命令的地方都換成cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
【開始整Antd Pro】
Ant Design Pro的安裝方式有幾種，可以自行選擇：
1. git clone（穩定，沒啥坑，速度偏慢github）
git clone https://github.com/ant-design/ant-design-pro.git
cd ant-design-pro
npm install
npm start
2. 官網推薦的方法
新建一個空的文件夾作為項目目錄，並在目錄下執行：
npm create umi
然后等待安裝依賴，完畢后會提示選擇模板，我們選擇第一個 ant-design-pro（完整的pro模板）：
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
選擇模板后，會彈出選擇版本，我們選擇v5（v5默認是typescript版本，也是antd pro的最新開發模式，v4可以選擇javascript/typescript兩種版本，如果不想用typescript方式，可以選擇v4，然后再選擇javascript即可。
Ant Design Pro 腳手架將會自動安裝...
運行Antd Pro（Ant Design Pro，下文簡稱Antd Pro）
安裝教授架完畢后，執行命令:
npm install
npm start
如果重試幾次還報錯，可以考慮換cnpm試試，我這就cnpm好使
cnpm install
cnpm start
等待webpack building完成
我們打開瀏覽器輸入 http://localhost:8000 即可看到初始頁面，大概長這樣：
可能我們想參考官網展示的大量組件的代碼，那么，我們如何得到官網這個較為完整的效果呢？
其實很簡單，在啟動的時候，我們加個參數 fetch:blocks ，會自動安裝完整的組件到我們的代碼中
cnpm run fetch:blocks
輸入命令會執行漫長地下載安裝過程，安裝完畢后，重新啟動即可
【簡單介紹一下】
目錄結構
Antd Pro 已經為你生成了一個完整的開發框架，提供了涵蓋中后台開發的各類功能和坑位，下面是整個項目的目錄結構。
├── config # umi 配置，包含路由，構建等配置
├── mock # 本地模擬數據
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地靜態資源
│ ├── components # 業務通用組件
│ ├── e2e # 集成測試用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 業務頁面入口和常用模板
│ ├── services # 后台接口服務，請求服務端接口的都放在這里
│ ├── utils # 工具庫
│ ├── locales # 國際化資源
│ ├── global.less # 全局樣式
│ └── global.ts # 全局 JS
├── tests # 測試工具
├── README.md
└── package.json
內置模板
- Dashboard
- 分析頁
- 監控頁
- 工作台
- 表單頁
- 基礎表單頁
- 分步表單頁
- 高級表單頁
- 列表頁
- 查詢表格
- 標准列表
- 卡片列表
- 搜索列表（項目/應用/文章）
- 詳情頁
- 基礎詳情頁
- 高級詳情頁
- 結果
- 成功頁
- 失敗頁
- 異常
- 403 無權限
- 404 找不到
- 500 服務器出錯
- 個人頁
- 個人中心
- 個人設置
- 圖形編輯器
- 流程圖編輯器
- 腦圖編輯器
- 拓撲編輯器
- 帳戶
- 登錄
- 注冊
- 注冊成功
代碼結構基本長這樣
模板內建了模擬數據、HMR 實時預覽、狀態管理、國際化、全局路由等等各種實用的功能輔助開發，想要了解更多可以訪問官網（目前比較粗糙）