ant design pro來源於ant design，其是一段自帶樣式的react組件，用於企業后台的漂亮的，可控的組件。ant design有很多組件和樣式，不可能所有都記住，我們只要記住常用的，遇到不常用的，學會查文檔就可以了
因為ant design很強大，阿里有些大神就直接將ant design繼續向上封裝成一個完整的項目，這就是ant design pro，注意ant design pro已經是一個成形的項目，配置環境已經好了，我們做項目只需要在其上進行增刪改就可以了，其就是個腳手架
安裝
npm create umi
然后在下面的選項中選擇ant design pro
這時候pro的腳手架就會安裝了
目錄結構
ant design pro最常用有兩個命令：
- umi dev:本地模擬開發環境，可以使用mock數據，使用的開發環境的服務器是express
- umi build：打包出靜態文件，使用線上服務器進行運行，如果在本地模擬線上環境，可以通過插件serve，這時候用不了mock數據的（可以安裝一個本地靜態服務器：npm i serve ，然后通過serve -s dist，這時候就可以在本地模擬一個線上環境）
路由和菜單是組織起一個應用的關鍵骨架，pro 中的路由為了方便管理，使用了中心化的方式，在 config.ts 統一配置和管理，根據路由的配置會自動生成對應的菜單。
我們看下如何定義和修改antd pro中的樣式
因為我們定義的css是全局性的，這就產生了全局污染的問題，也就是說，我們通過npm run build之后的css文件，后面的css選擇器會覆蓋前面的css選擇器，為了解決這種情況，我們采用了css modules方式，其定義如下：
import styles from './example.less';
export default ({ title }) => <div className={styles.title}>{title}</div>;
.title {
color: @heading-color;
font-weight: 600;
margin-bottom: 16px;
}
在上面的樣式文件中，.title 只會在本文件生效，你可以在其他任意文件中使用同名選擇器，也不會對這里造成影響。
下面我們看下pro作為前端框架和服務端是如何進行交互的：
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 使得異步調用的邏輯處理跟同步一樣)：
effects: {
*fetch({ payload }, { call, put }) {
yield put({
type: 'changeLoading',
payload: true,
});
// 異步請求 1
const response = yield call(queryFakeList, payload);
yield put({
type: 'save',
payload: response,
});
// 異步請求 2
const response2 = yield call(queryFakeList2, payload);
yield put({
type: 'save2',
payload: response2,
});
yield put({
type: 'changeLoading',
payload: false,
});
},
},
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
- 注意開發過程中，如果遇到困難，可以查官方文檔，看看有沒有對應的例子，實在不行，可以看源碼
掃碼關注公眾號，有更多精彩文章等你哦
