我们已经创建了Web Api，现在可以创建使用这些Web Api的应用的。我们以Vue.js为例创建单页面应用(SPA)。我们使用Vistual Studio 2017创建这个应用。
使用Vistual Studio 创建 Vue.js项目框架
首先要确认是否安装了Node.js，在命令行中输入node -v，可以显示node的版本，如果没有安装，会出现提示。
查看node版本
在Vistual Studio 2017 中，创建新项目，选择项目类型JavaScript->Node.js或者TypeScript->Node.js，选择“基本的Vue.js Web 应用程序”：
创建Vue项目
如果项目中没有相应的类型，需要在安装界面安装基于Node.js的开发：
安装扩展
安装Node支持
我们选择创建基于JavaScript->Node.js的Vue.js Web应用：
项目结构
创建完成后，Vistual Studio会调用npm install 安装项目需要的npm模块，这需要等待一会儿，根据网格情况不同，有时可能会等几分钟。可以在输出窗口中选择Npm，查看npm模块的安装进度。
Npm输出
安装完成后，可以编译运行项目。
Vistual Studio 会启动node.js，并启动浏览器：
服务端启动
浏览器启动
在Vue.js项目中调用ABP的Web Api
首先，为我们的项目添加axios包,在项目的nmp文件夹上，单击右键，选择安装新的npm包，弹出安装界面：
abp-8-step9.PNG
修改App.vue 文件如下：
<template>
<div id="app">
<ul>
<li v-for="(item,index) of list" :key="index">
{{item.categoryName}}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'app',
data: function () {
return {
errmsg: {},
list: [{ categoryName: "C1" }, { categoryName: "C2" }]
}
}, mounted() {
axios
.post('http://localhost:6749/api/services/app/Poem/GetAllCategories')
.then(response => (this.list=response.data.result))
.catch(function (error) {
this.errmsg = error;
});
}
};
</script>
需要同时运行ZL.Poem.WebApi和ZL.VueJs执行项目，发现不能跨域访问，我们必须在ZL.Poem中启动跨域访问。
需要在Startup的ConfigureServices方法中注册cors策略:
services.AddCors(option => option.AddPolicy("cors", policy => policy.AllowAnyHeader().AllowAnyMethod().AllowCredentials().AllowAnyOrigin()));
然后在Configure中使用这个策略
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors("cors");
再次运行，能够正确显示分类列表了。
结果
这里只是一个开始，说明如何使用VS2017创建Vue.js项目，以及如何调用ABP的web api。关于Vue.js项目的更多内容，有时间会另起一个系列说明。
本文同步发布在我的个人网站 http://www.jiagoushi.cn
