ant design pro來源於ant design，其是一段自帶樣式的react組件，用於企業後臺的漂亮的，可控的組件。
因為ant design很強大，阿里有些大神就直接將ant design繼續向上封裝成一個完整的項目，這就是ant design pro，注意ant design pro已經是一個成形的項目，配置環境已經好了，我們做項目只需要在其上進行增刪改就可以了，其就是個腳手。架
安裝
npm create umi
然後在下面的選項中選擇ant design pro
目錄結構
我們寫的界面主要是在pages裡面，路由配置主要是在config裡面
ant design pro最常用有兩個命令：
umi dev:本地模擬開發環境，可以使用mock數據，使用的開發環境的伺服器是expressumi build：打包出靜態文件，使用線上伺服器進行運行，如果在本地模擬線上環境，可以通過插件serve，這時候用不了mock數據的（可以安裝一個本地靜態伺服器：npm i serve ，然後通過serve -s dist，這時候就可以在本地模擬一個線上環境） 路由和菜單是組織起一個應用的關鍵骨架，pro 中的路由為了方便管理，使用了中心化的方式，在 config.ts 統一配置和管理，根據路由的配置會自動生成對應的菜單。
定義和修改antd pro中的樣式
因為我們定義的css是全局性的，這就產生了全局汙染的問題，也就是說，我們通過npm run build之後的css文件，後面的css選擇器會覆蓋前面的css選擇器，為了解決這種情況，我們採用了css modules方式，其定義如下：
在上面的樣式文件中，.title 只會在本文件生效，你可以在其他任意文件中使用同名選擇器，也不會對這裡造成影響。
前後端如何進行交互的：
1.UI 組件交互操作；2.調用 model 的 effect；3.調用統一管理的 service 請求函數；4.使用封裝的 request.ts 發送請求；5.獲取服務端返回；6.然後調用 reducer 改變 state；7.更新 model。
從上面的流程可以看出，為了方便管理維護，統一的請求處理都放在 services 文件夾中，並且一般按照 model 維度進行拆分文件， 在處理複雜的異步請求的時候，很容易讓邏輯混亂，陷入嵌套陷阱，所以 Ant Design Pro 的底層基礎框架 dva 使用 effect 的方式來管理同步化異步請求(通過 generator 和 yield 使得異步調用的邏輯處理跟同步一樣)：
tips:
跨域：只要請求協議或者IP或者埠有一個不同，就表示是不同的請求，這時候就存在跨域，注意跨域請求中，伺服器還是可以接收到跨域請求的，只是響應會被瀏覽器給攔截，所有處理跨域有個方法就是讓伺服器告訴瀏覽器某個請求允許跨域,當然處理跨域還可以使用代理方式proxy其實前端開發說起來很簡單，也就是兩件事，就是發起請求和處理數據，把這兩件事情處理好了，前端也就學好了，再複雜的前端框架都是圍繞這兩點展開的antd pro是基於umi，es6，dva，等，如果有這幾方面基礎，會更加容易掌握antd pro本質上pro裡面的mock數據是不支持線上環境調用的，但是有些時候確實需要在線上環境調用mock，這時候可以通過工具umi serve，將mock數據單獨抽離出來，運行在某一個服務上，供pro調用。注意umi serve相對於umi dev區別是：umi dev支持熱更新，但是umi serve不支持熱更新，需要重新啟動後才會更新界面，umi serve更像線上環境安裝包的時候，npm install [...]默認是npm install [...] -S在一個項目中，到底是使用npm安裝依賴還是yarn，有一個參考標準，就是根據package.json裡面某些命令是用npm還是yarn在終端中，如果想知道當前路徑，可以通過命令：pwd注意開發過程中，如果遇到困難，可以查官方文檔，看看有沒有對應的例子，實在不行，可以看源碼ant design有很多組件和樣式，不可能所有都記住，我們只要記住常用的，遇到不常用的，學會查文檔就可以了