腳手架搭建
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
然後  cd my-project

項目的目錄結構：
config    umi配置，包含路由，構建等配置
mock      本地模擬數據
public   
favicon    Favicon
src
assets    本地靜態資源
components    業務通用組件
e2e    集成測試用例
layouts   通用布局
models    全局  dva  model
pages    業務頁面入口和常用模板
services   後臺接口服務
utils    工具庫
locales   國際化資源
global.less   全局樣式
global.js   全局JS
tests   測試工具
README.md
package.json


編輯樣式文件直接采用css module
css的規則都是全局作用域；而css modules通過使用一個獨一無二的clsss的名字，所以不會與其他選擇器重名，從而產生局部作用域；；；
 
CSS Modules 提供各種插件，支持不同的構建工具
composes關鍵詞 實現類似繼承extend的效果  甚至可以跨文件進行繼承
.serif-font {
font-family: Georgia, serif;
}
.display {
composes: serif-font;
font-size: 30px;
line-height: 35px;
}

如果需要，也可以在樣式文件的頭部引入antd樣式變量文件
編輯樣式文件，在樣式文件的頭部引入antd樣式變量文件
@import "~antd/lib/style/themes/default.less";
eg：使用less進行樣式編輯
在index.less文件中編寫樣式，
在該文件第一行引入@import 
 
"~antd/lib/style/themes/default.less";
編寫樣式  .top{ height: 20px; }
在對應的js文件中引入  import styles from ‘./index.less‘
<div className={styles.top}>就可以了
編輯樣式文件，在樣式文件的頭部引入antd樣式變量文件
@import "~antd/lib/style/themes/default.less";
eg：使用less進行樣式編輯
在index.less文件中編寫樣式，
在該文件第一行引入@import "~antd/lib/style/themes/default.less";
編寫樣式  .top{ height: 20px; }
在對應的js文件中引入  import styles from 
 
‘./index.less‘
<div className={styles.top}>就可以了

使用:global設置全局樣式

樣式文件類別：
全局樣式文件  src/index.less  進行一些通用設置
src/utils/utils.less    防止一些工具函數供調用，比如清除浮動 .clearfix
模塊樣式    針對某個模塊、頁面生效的文件
通用模塊級
頁面級
組件級
還有內聯樣式  style={{...}}來設置
覆蓋樣式文件   覆蓋是全局性的，所以為了防止對其他的組件產生影響，需要包裹額外的className限制樣式的生效範圍
  <Select
    mode="multiple"
    style={{ width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
    {children}
  </Select>
對應樣式
.customeSelect {   額外的className
:global {        全局樣式，進行覆蓋
.ant-select-selection {    被覆蓋的類名
max-height: 51px;
overflow: auto;
}
}
}

Ant Design Pro抽離了使用過程中的通用布局，都放在layouts目錄，分別為：
BasicLayout: 基礎頁面布局，包含了頭部導航，側邊欄和通知欄
UserLayout：抽離出用於登陸註冊頁面的通用布局
BlankLayout: 空白的布局
布局通常是和路由緊密結合的，Ant Design Pro的路由采用umi的路由方案(umi不僅僅是前端構建工具，還包含了路由以及一套插件機制用於構建一個完整的React應用。)   
在config/router.config.js文件中進行路由配置
進行Pro擴展配置，即擴展一些關於pro全局菜單的配置
{
name: ‘dashboard‘,
icon: ‘dashboard‘,
hideInMenu:true,
hideChildrenInMenu:true,
hideInBreadcrumb:true,
authority:[‘admin‘],
name:當前路由在菜單和面包屑中的名稱，註意這裏是國際化配置的key，具體展示菜單名可以在/src/locales/zh-CN.js進行配置
}

Ant Design的兩套布局組件工具 Layout和 Grid .
Grid組件
柵格布局：按照一定比例劃分頁面，能夠隨著屏幕的變化依舊保持原比例
柵格布局包含：
container:包裹整個柵格系統的容器
rows:行
columns:列
gutters:各列之間的空隙
對於container,容器的寬度我們通常設置為100%，也可以為更大的顯示器設置最大寬度max-width
.grid-container{ width:100% ; max-width:1200px ;}
對於row，行元素用於防止裏面的列（column）溢出到其他的行。通常使用clearfix來清除浮動，因為我們是通過浮動來制作柵格系統的
.row:before,
.row:after { content: ""; display: table ; clear:both }
對於column,列元素是柵格系統的核心，常使用float

就是在row裏定義多個column（列）
box-sizing:border-box;  設置成怪異盒模型
content-box; 設置成標準盒模型

Layout布局：協助進行頁面級整體布局

構建和發布
項目開發完畢   打包應用  npm run build
由於Ant Design Pro使用的工具Umi已經將復雜的流程封裝完畢，構建打包文件只需要umi build這一個命令,構建打包成功之後，
會在根目錄生成dist文件夾，裏面就是構建打包好的文件，通常是.js .css index.html等靜態文件
如果需要自定義構建，可以在config/config.js配置（umi配置https://umijs.org/zh/guide/config.html）

分析構建文件體積（如果你的構建文件很大）
npm run analyze 構建並分析依賴模塊的體積分布，從而優化代碼（該命令會自動在瀏覽器打開顯示體積分布數據的網頁）

發布
只需要將最終生成的靜態文件，dist文件夾的靜態文件發布到你的cdn或者靜態服務器即可，其中的index.html通常是你後臺服務的入口文件，
在確定了js和css的靜態之後可能需要改變頁面的引入路徑

使用ant design pro搭建項目