之前項目都自行寫前端css、html、js、后端等等幾個項目下來后實在太累就開始尋找好用的前端框架，偶然發(fā)現(xiàn)layui pro和ant design pro專門的后臺管理系統(tǒng)框架，先1600大洋下手了layui pro花了兩天時間研究了下，發(fā)現(xiàn)layui思路很好，也在很多細節(jié)上站在開發(fā)人員的角度上處理得很用心，就拿JWT來說真的該想的都想到了也做了（我也只研究了登錄和菜單-_-!!!）。后面又偶然發(fā)現(xiàn)了ant design pro，個人覺得任何一個技術(shù)或者產(chǎn)品在上手之前一定要先了解一下生態(tài)圈是否夠大，不然路上掉坑爬不出來！最終在我購買了layui pro一周后我放棄了它轉(zhuǎn)投ant design pro，原因很簡單，生態(tài)圈夠大！UI各方面夠友好，但之前一直使用jQuery做為前端開發(fā)框架的同學們就得注意了，入門門檻相對layui pro較高，但個人建議還是堅持學下去。這里真的要吐槽一下layui pro，為啥付了款就沒一個可以申請發(fā)票的地方 ？
ant design pro for v2.x 入門貨（依次按順序逐一操作到最后）：
安裝#
從 GitHub 倉庫中直接安裝最新的腳手架代碼。
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
目錄結(jié)構(gòu)#
我們已經(jīng)為你生成了一個完整的開發(fā)框架，提供了涵蓋中后臺開發(fā)的各類功能和坑位，下面是整個項目的目錄結(jié)構(gòu)。
├── config? ? ? ? ? ? ? ? ? # umi 配置，包含路由，構(gòu)建等配置
├── mock? ? ? ? ? ? ? ? ? ? # 本地模擬數(shù)據(jù)
├── public
│? └── favicon.png? ? ? ? ? # Favicon
├── src
│? ├── assets? ? ? ? ? ? ? # 本地靜態(tài)資源
│? ├── components? ? ? ? ? # 業(yè)務通用組件
│? ├── e2e? ? ? ? ? ? ? ? ? # 集成測試用例
│? ├── layouts? ? ? ? ? ? ? # 通用布局
│? ├── models? ? ? ? ? ? ? # 全局 dva model
│? ├── pages? ? ? ? ? ? ? ? # 業(yè)務頁面入口和常用模板
│? ├── services? ? ? ? ? ? # 后臺接口服務
│? ├── utils? ? ? ? ? ? ? ? # 工具庫
│? ├── locales? ? ? ? ? ? ? # 國際化資源
│? ├── global.less? ? ? ? ? # 全局樣式
│? └── global.js? ? ? ? ? ? # 全局 JS
├── tests? ? ? ? ? ? ? ? ? ? # 測試工具
├── README.md
└── package.json
本地開發(fā)#
安裝依賴。
$ npm install
如果網(wǎng)絡狀況不佳，可以使用 cnpm 進行加速。
$ npm start
推薦使用國內(nèi)鏡像（國外鏡像可能導致安裝不完整出現(xiàn)各種無法理解問題，另外在安裝時有130MB+無法正常下載，哪怕ctrl+c停止后重新安裝也無法正常安裝）
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
第一次正常 cnpm start 啟動后可正常運行沒任何問題（chrome控制臺不報錯）
不用演示數(shù)據(jù)啟動
config目錄下config.js中添加proxy屬性設置
proxy: {
? ? '/api': {
? ? ? target: 'http://localhost:3000/',
? ? ? changeOrigin: true,
? ? ? pathRewrite: {
? ? ? ? '^/api': ''
? ? ? }
? ? }
? },
使用npm run start:no-mock啟動項目
要點：原理可以簡單的理解為，在本地啟了一個服務，你先請求了本地的服務，本地的服務轉(zhuǎn)發(fā)了你的請求到實際服務器。所以你在瀏覽器上看到的請求地址還是http://localhost:8000/xxx（這句話很重要，我在github官方看到的問題回復中才解決的問題）
配置后在瀏覽器中訪問代理后的接口地址看是否正確：/api/******/********
最后直接在src目錄下services目錄下api.js文件中添加或修改需要調(diào)用的接口即可
配置完成后記得重啟服務
