Ant Design Pro是一套基於Ant Design的開箱即用的中臺前端/設計解決方案。

在本文中，我們將會詳細講解如何利用Ant Design Pro快速搭建一套前端服務。

前期準備

1.  安裝Git
2.  安裝nodejs

Ant Design Pro安裝

方式1：克隆git倉庫

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
d my-project

方式2：使用命令列工具

Ant Design Pro退出了命令列工具：ant-design-pro-cli。 
首先使用npm install進行安裝：

npm install ant-design-pro-cli -g
mkdir my-project && cd my-project
pro new  # 初始化專案空間結構

安裝完成後的空間結構如下：

├── mock                     # 本地模擬資料
├── public
│   └── favicon.ico          # Favicon
├── src
│   ├── assets               # 本地靜態資源
│   ├── common               # 應用公用配置，如導航資訊
│   ├── components           # 業務通用元件
│   ├── e2e                  # 整合測試用例
│   ├── layouts              # 通用佈局
│   ├── models               # dva model
│   ├── routes               # 業務頁面入口和常用模板
│   ├── services             # 後臺介面服務
│   ├── utils                # 工具庫
│   ├── g2.js                # 視覺化圖形配置
│   ├── theme.js             # 主題配置
│   ├── index.ejs            # HTML 入口模板
│   ├── index.js             # 應用入口
│   ├── index.less           # 全域性樣式
│   └── router.js            # 路由入口
├── tests                    # 測試工具
├── README.md
└── package.json
 

安裝依賴包

當ant design pro空間初始化完成後，可以使用如下命令來安裝依賴：

npm install

Ps：該命令會根據package.json中的依賴包資訊安裝對應的依賴包檔案。 
由於依賴的包相對較多，因此整個安裝過程可能較長，需要耐心等待。

啟動服務

當依賴包也已經安裝完成後，我們可以執行如下命令來啟動前端服務了：

npm start

接下來你可以修改程式碼進行業務開發了。 
在接下來的文章中，我們將進一步的學習如何進行業務專案的開發以及本身框架的推薦使用方式。