应用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表格中：
运行效果如下：
说明：示例应用很简单，目前属于踩坑阶段，有不正确的地方一起补充。