應用VUE踩的最大的坑，模擬實現前后端分離，即如何應用VUE前端調用后端服務接口。
應用環境（vscode）
1． vue-cli (2.x)，最新版本3.0，以后會升級。
/ /如果沒有安裝舊版本的 vue-cli 可以跳過卸載直接安裝
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
然后重新安裝新版本的 @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
當前實例版本：
2．VS Code前端開發環境
說明：已經寫過相關文檔，可參見：安裝VUE開發環境--VSCode。
后端接口（swagger）
本例測試的是真實的接口，為ABP VNext創建的接口，實例文檔可參見：ABP之領域層和應用層-基本應用分享。
應用Swagger查看的接口文檔：
講解下，ABP VNext中如何配置WebApi。
1．WebApi后台需要安裝NuGet包Swashbuckle.AspNetCore，如下圖所示：
2．在Startup.cs文件中配置swagger：
將上述方法在ConfigureServices方法中注冊，服務必須注冊不然不啟作用：
服務注冊完成后，Configure方法進行配置：
上述代碼中：options.SwaggerEndpoint("/swagger/v1/swagger.json", "BookStore API");
作用：配置swagger.json文件的地址及swagger的版本。
至此后台端的swagger已配置完成，運行項目結果如下所示：
我們拿其中的獲取Book信息的get/api/book接口為例，在前端Vue中進行調用：
查看其設置的Json文檔：https://localhost:44361/swagger/v1/swagger.json
接口測試，訪問接口地址：https://localhost:44361/api/app/book
說明：上述接口地址在Edage中能打開，可表明接口訪問正常，也可用專門的工具進行接口測試，比如postman。
Json格式化后：
說明：以上Json格式數據將會綁定到elementUI中的table數據表格中進行顯示。
前端VUE配置（vue-axios）
1．安裝swagger包
使用vscode打開VUE環境，打開終端輸入以下命令安裝swagger包，如下圖所示：
安裝成功后，查看package包，如下圖的所示：
2．安裝axios和vue-axios
vue高版本中，推薦使用axios進行網絡請求，推薦啥咱就用啥吧！
命令如下：
//可以用vscode終端應用npm命令安裝
$ npm i axios -S
$ npm i vue-axios -S
說明：安裝完axios，vue-axios之后可以在Vue項目下面node_modules/_vue-axios/src/index.js中看到vue-axios的源代碼。
然后在main.js中引用，main.js是項目入口文件，全局的應用放在這里。
本例子中使用第二種方法：
然后在VUE組件中，可以如下應用：
GET方法：
POST方法：
本例子中只簡單應用了GET方法，如下圖所示：
3．Axios跨域代理
對於前后端分離模式下，前端請求后端存在跨域問題！前端解決跨域問題，可以考慮使用代理。
例如，要請求的后端接口地址：
https://localhost:44361/api/app/book
但是本地的vue項目的端口號是8080，這里就涉及到了端口號不一致導致的同源策略問題（如果考慮改成同端口，會沖突）、那么我發起請求就會跨域而被瀏覽器攔截，解決辦法（開發環境下）可以使用vue跨域代理。
首先，看下不設置代理效果，直接用axios訪問后端接口：
瀏覽器會報如下錯誤，進行攔截：
更清晰點：
以上報的錯誤就是跨域問題！報錯解釋：
其中http://localhost:8080是默認的服務器端口，在package.json中 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",利用webpack-dev-server插件，搭建一個服務器，執行webpack.dev.conf.js，內置的服務器沒有/api接口,所以會報錯。
解決辦法：
在vue的config文件夾中有個index.js文件：
在proxyTable中配置代理（名字可以隨便起，我用的是/api）
這里的代理設置，有幾處坑要注意。
1．代理類型是Http還是Https是有區別設置的。
我們測試的接口是Https類型，其代理要加上secure: false屬性，否則瀏覽器會報Http500錯誤，解決方法如下：
如查代理的是Http，方法如下：
2．代理別名如果在接口中存在，如何設置。
我們方法的接口：https://localhost:44361/api/app/book
我們起的代理名稱：‘/api’在接口中存在相同的名稱。
首先，在proxy模塊中設置了‘/api’，target中設置服務器地址+端口號（一般都采用這種模式，比較標准），然后我們在調用接口的時候，就可以全局使用‘/api’，這時候‘/api’的作用就相當於一個唯一標識，比如接口地址是 https://localhost:44361/api/app/book，那我們在調用接口時可以直接寫為/api/app/book，系統會自動識別proxy中/api標識中的target地址並拼接在一起。
VUE組件中如下調用接口：
那pathRewrite是用來干嘛的呢，這里的作用，相當於是替換‘/api’，如果接口中沒有/api，那就直接置空，但是我們的接口中有/api，這時候如果置空后真實的地址就變成了： https://localhost:44361/app/book，與真實接口不一致，這就導致了接口錯誤，報錯404；如果接口中有/api，那就得寫成{‘^/api’:‘/api’}，可以理解為一個替換路徑、重寫路徑或者重定向的功能。
還有一種解決辦法就是不設置pathRewrite參數，直接屏蔽掉或刪除即可，使用默認設置就可以。
注意：配置完成后，一定要重啟項目，可以應用命令：npm start或npm run dev。
運行效果
示例實現的思路：因為應用VUE實現的就是前后端分離，這里調用ABP VNext的API接口：https://localhost:44361/api/app/book
調用以上接口的目的是將數據庫中：
將以上數據庫中的兩條數據在VUE中通過跨域代理，綁定到ElementUI中的Table表格中：
運行效果如下：
說明：示例應用很簡單，目前屬於踩坑階段，有不正確的地方一起補充。