一、概述

1.1、腳手架概念

　　編程領域中的“腳手架（Scaffolding）”指的是能夠快速搭建項目“骨架”的一類工具。例如大多數的React項目都有src，public，webpack配置文件等等，而src目錄中又包含components目錄等等。每次在新建項目時，手動創建這些固定的文件目錄。腳手架的作用就是幫助你完成這些重復性的工作，包括一鍵生成主要的目錄結構、安裝依賴等等。

1.2、參考地址　　

ant design參看地址：https://ant.design/docs/react/introduce-cn

　　其中主要包含了各種插件及使用

ant design pro參看地址：https://pro.ant.design/docs/getting-started-cn

　　其中主要是一個企業級中後臺前端/設計解決方案

二、準備工作

　　本地環境需要安裝 node 和 git。技術棧基於 ES2015+、React、dva、g2 和 antd，提前了解和學習這些知識會非常有幫助。

三、安裝

有兩種方式進行安裝：

方式一、直接 clone git 倉庫

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

方式二、使用命令行工具

你可以使用集成化的命令行工具 ant-design-pro-cli。

$ 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

五、項目加載啟動

方式一、使用原始npm啟動

此時可以本地啟動

$ npm install
$ npm start

啟動過程

E:\work\antdesign\my-project>npm start

> [email protected] start E:\work\antdesign\my-project
> cross-env ESLINT=none roadhog dev

Compiled successfully!

You can now view Your App in the browser.

  Local:            http://localhost:8000/
  On Your Network:  http://10.0.9.120:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

啟動完成後會自動打開瀏覽器訪問 http://localhost:8000，你看到下面的頁面就代表成功了。

·

方式二、使用idea插件

　　安裝過程如 ：http://www.cnblogs.com/bjlhx/p/8967531.html

使用過程：

　　1、在第三步使用git獲取代碼後，打開idea，使用File→Open打開項目目錄即可

　　2、打開idea內嵌terminal，執行【其實此步驟可以直接拷貝其他項目下的node_modules文件】

npm install

　　3、在項目的package.json上右鍵，點擊show npm scripts，出現如下圖，如果找不到可以通過，View→tools windows→npm打開，

　　4、雙擊start執行即可

接下來你可以修改代碼進行業務開發了，我們內建了典型業務模板、常用業務組件、模擬數據、HMR 實時預覽、狀態管理、國際化、全局路由等等各種實用的功能輔助開發，你可以繼續閱讀和探索左側的其他文檔。

004-ant design pro安裝、目錄結構、項目加載啟動