目录
需求
解决方案
外部参考
在UI组件上使用Vue JS设置ASP.NET Core 2.2应用程序，而不使用npm / webpack。
需求你被WayKurat雇用了，这是一家开发vue js/ASP.NET核心应用程序的虚拟公司。
第二天，你迟来到办公室。你的老板在你的办公桌旁等着你，当他注意到你的行为时，他会露出笑容。幸运的是，他并没有为你迟到而生气，他很高兴告诉你他希望你从头开发一个简单的网络应用程序，该应用程序将列出WayKurat订阅者（订阅web api已经由讨厌的同事开发完成）。
您需要在VS 2017上使用ASP .NET Core 2.2并要求尝试使用libman而不是bower / npm或手动下载libs。
解决方案创建一个新的ASP.NET Core应用程序，将项目名称设置为WayKuratWeb.SimpleVueJs
选择ASPMVC项目模板
你的老板喜欢vue js所以我们将使用Libman安装Vue。右键单击项目，然后点击
添加 - >添加客户端库...
将显示Libman添加库窗口，键入“vue”，然后在下拉列表中单击vue（可能是您的最终版本）。选择特定文件，按下图所示勾选文件，然后点击安装。
现在安装了vue，让我们创建一个vue组件。在wwwroot / js/文件夹下创建一个新的js文件 将文件名设置为VueSubscriberListComponent.js（只是一个例子，你可以像你的奶奶一样称呼它）
接下来粘贴这个js代码。这将是我们的Vue组件。
var subscriberListComponent = new Vue({
el: '#subscriber-list-component',
data: {
subscribers: [],
isViewReady: false
},
methods: {
refreshData: function () {
this.isViewReady = false;
//dummy data for now, will update this later
var subscribers = [
{ name: 'jic', email: 'paytercode@waykurat.com' },
{ name: 'kin', email: 'monsterart@waykurat.com' }
];
this.subscribers = subscribers;
this.isViewReady = true;
}
},
created: function () {
this.refreshData();
}
});更新项目的/Views/Home/Index.cshtml文件以引用vue和我们的组件
@{
ViewData["Title"] = "Home Page";
}
WayKurat Subscribers
-
{{ u.name }} - {{u.email}}
REFRESH
Loading data...
@section Scripts{
}在浏览器上运行应用，您的应用将如下所示。如果没有，请检查浏览器控制台是否有错误（请在提交stackoverflow问题之前检查它，它不是黑盒子）
现在是时候让我们使用你同事完成的Web API。但事情并不像他们看起来那样，他昨天没有上传他的代码，看起来他正在擅离职守。所以你现在被迫写一个虚拟的web api。添加一个新的控制器，将名称设置为SubscribersController.cs然后粘贴此代码。
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace WayKuratWeb.SimpleVueJs.Controllers
{
[Route("/api/[controller]/[action]/")]
public class SubscribersController : Controller
{
[HttpGet]
public IActionResult GetAll()
{
//hard coded data for brevity, this must be from a data store on the real world
var subs = new List();
subs.Add(new Subscriber() { Id=1,Name = "JEK",Email="jekhaxor@test.test"});
subs.Add(new Subscriber() { Id = 1, Name = "Jikie", Email = "jekiedraws@test.test" });
return Ok(subs);
}
}
public class Subscriber
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
}
}现在添加了控制器，将使用ajax在我们的组件上使用它。您准备编写一个发送XMLHttpRequest的简单js，但你的老板看到了它并坚持使用axios。好吧，如果这就是他想要的，那就让我们做吧。通过libman安装Axios。像安装vue时一样打开libman窗口。键入“axios”，然后选择文件，如下图所示。
在Index.cshtml上添加对axios的引用
@{
ViewData["Title"] = "Home Page";
}
WayKurat Subscribers
-
{{ u.name }} - {{u.email}}
REFRESH
Loading data...
@section Scripts{
}更新VueSubscriberListComponent.js以使用我们的web api
var subscriberListComponent = new Vue({
el: '#subscriber-list-component',
data() {
return {
subscribers: [],
isViewReady: false
};
},
methods: {
refreshData: function () {
var self = this;
this.isViewReady = false;
//UPDATED TO GET DATA FROM WEB API
axios.get('/api/subscribers/getall/')
.then(function (response) {
self.subscribers = response.data;
self.isViewReady = true;
})
.catch(function (error) {
alert("ERROR: " + (error.message|error));
});
}
},
created: function() {
this.refreshData();
}
});您在浏览器上检查了您的应用程序，并按预期运行。您做了自己的部分，您已将代码上传到repo并准备午餐。现在你刚刚使用了libman并编写了一个vue compoenent。
外部参考你会在这里了解更多
https://vuejs.org/v2/guide/
https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.2
原文地址：https://www.codeproject.com/Tips/1271379/Simple-ASP-NET-CORE-2-2-app-plusVue-JS
