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