【前言】

找了很多Admin模板，最後還是看中了AntDesignPro這個阿里巴巴開源的Admin框架，長這樣（還行吧，目前挺主流的）：

官網地址：https://pro.ant.design/index-cn

該套模板是使用了React開發框架作為基礎，AntDesign（螞蟻金服開源UI元件庫）作為UI庫，集成了Dva，Umi，Mock等庫，如果不是很瞭解這些內容，門檻還是比較高的，下面我們梳理一下從零開始執行起來這個專案的過程。

【準備環境】

1. node js 安裝最新版即可
   我的nodejs版本 v12.18.3
2. 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 實時預覽、狀態管理、國際化、全域性路由等等各種實用的功能輔助開發，想要了解更多可以訪問官網（目前比較粗糙）

官網地址：https://pro.ant.design/index-cn