AspDotNet+VueCli3从零开始
0. Why？
- 前后端分离开发，后端提供api前端独立建工程，相信大家都是这么干的。但这种方式有个弊端：在部署上线时，需要为前端页面新开一个端口，而且，开发期间两个编辑器切来切去总感觉很烦。
- 如果你和我一样，前后端同时开发，并且使用
dotnet core + Vue技术栈。我觉得本文比较适合你，这里介绍了如何使用dotnet2x与最新的Vue Cli3无缝集成，进行行云流水般的开发。 - 如果你依然喜欢使用
dotnet mvc + Razor， 本文不适合你。不过，看看下面的代码，我真心觉得没几个人再会用这样的语法写工程了。
//.cshtml代码片段截取
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Info" class="control-label"></label>
<textarea class="form-control" rows="15" asp-for="Info"></textarea>
<span asp-validation-for="Info" class="text-danger"></span>
</div>
😰 😱 🥵 🥶 WTF...
- 如果你
Typescript很熟练，本文既适合也不适合你，官方有现成的TS模板开箱即用，但是，VueCli3的Ts模板比官方的要好用很多。这个你自己决定吧。
下面正式开始，首先摘录一段来自官方低沉的抱怨
As far as I’m aware, we don’t have plans to introduce Vue-specific features. This isn’t because we have anything against Vue, but rather just to limit the growth in the number of frameworks that we’re maintaining support for. The dev team only has a finite capacity for handling third-party concepts, and last year we made the strategic choice to focus on only Angular and React.
--我们暂时没有针对Vue开发项目模板的计划，这并不是说我们对Vue有什么偏见，而是我们...tm的实在是太忙了，顾不过来啊兄嘚...我们暂时只有 Angular 和React的，你们先将就着用吧...
本文所有内容使用vs code编辑器+控制台完成
1. 找个合适的地方，运行dotnet new建项目
注意，官方并没有现成的Vue模板（官方目前是TypeScript版本的），所以我们使用react模板，然后无偶们一步步修改成Vue：
dotnet new react
2. 开始修改
- Startup.cs文件中,将目标文件夹改为dist：
// configuration.RootPath = "ClientApp/build";
configuration.RootPath = "ClientApp/dist";
- 移去45行的https设置，否则还要设置证书
//app.UseHttpsRedirection();
- 根据开头那段话，官方没有包，我们需要安装一个第三方包：
dotnet add package VueCliMiddleware - 继续回到Startup文件，
using VueCliMiddleware;
将react替换为vue(64行附近):
//spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseVueCli(npmScript: "serve", port: 8080);
- 现在， 你的工程看起来是这个样子，接下来，删除
ClienApp文件夹下的所有内容（保留ClientApp文件夹）
image.png
3. 建立客户端项目
下一步自然是在ClientApp文件夹下使用好评如潮的VueCli3建立项目了。but wait， vue不允许使用首字母大写的命名方式，所以我们还是需要先建立一个client-app项目，然后把所有内容移动到到ClientApp文件夹下。
在项目根文件夹下，使用vue ui或者vue create client-app建立项目，然后把所有内容移动到ClientApp文件夹。
That's All...👌
项目根目录下运行dotnet run, 打开localhost:8080, 熟悉的Vue启动界面出现了。这一切简直不要太美好。感谢开源社区。
测试一下看看：
- 首先hotload：没问题，编辑器修改浏览器自动刷新
- 然后测试axios：
额外bb一下：强推大家使用vue ui，真是好用的不得了👏🏻，插件、依赖、项目生成运行全部用面板操作，再不用控制台了
干货时刻
我们首先进入clientapp目录，运行vue ui,然后找到vue-cli-plugin-axios插件，并安装
安装完毕后vue cli会自动配置插件，不用手动引入。
打开plugins/axios.js文件，我们看到vue已经自动将axios注册成了Vue全局组件：
Plugin.install = function(Vue, options) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
}
},
$axios: {
get() {
return _axios;
}
},
});
};
Vue.use(Plugin)
在后台Controller文件夹下，我们新建一个HelloWorldController.cs, get时返回一个字符串列表：
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
[Route("api/[controller]")]
public class HelloWorldController : Controller
{
[HttpGet]
public IActionResult Index()
{
var data = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
return Json(data);
}
}
下面我们在前台的About.vue中测试一下：
<template>
<div class="about">
<h1>This is an about page</h1>
<ul>
<li v-for="i in items" :key="i">{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: []
};
},
created() {
this.axios.get("api/helloworld").then(res => {
this.items = res.data;
});
}
};
</script>
运行报错，我们还需要进一步设置才能愉快玩耍：
- 修改Startup.cs文件，启用跨域，并且重新定义路由：
//ConfigureServices方法：
services.AddCors();
//Configure方法：
//使用跨域
app.UseCors();
//定义api路由：
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action=Index}/{id?}");
routes.MapRoute(
name: "api",
template: "api/{controller}/{action=Index}/{id?}");
});
页面显示正确，axios配制成功！
写在最后：
- 注意，安装插件、依赖时一定要确保在ClientApp文件夹下进行
- 在工程根目录运行
dotnet watch run获得前后端同时刷新无缝开发体验
