发布：2023/12/7 15:29:56作者：大数据 来源：大数据 浏览次数：162

在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组件。

1. var subscriberListComponent = new Vue({
2. el: '#subscriber-list-component',
3. data: {
4. subscribers: [],
5. isViewReady: false
6. },
7. methods: {
8. refreshData: function () {
9. this.isViewReady = false;
11. //dummy data for now, will update this later
12. var subscribers = [
13. { name: 'jic', email: 'paytercode@waykurat.com' },
14. { name: 'kin', email: 'monsterart@waykurat.com' }
15. ];
17. this.subscribers = subscribers;
18. this.isViewReady = true;
19. }
20. },
21. created: function () {
22. this.refreshData();
23. }
24. });

更新项目的/Views/Home/Index.cshtml文件以引用vue和我们的组件

1. @{
2. ViewData["Title"] = "Home Page";
3. }
4. <div class="text-center">
5. <div id="subscriber-list-component">
6. <h3>WayKurat Subscribers </h3>
7. <div v-if="isViewReady == true">
8. <ol>
9. <li v-for="u in subscribers">
10. {{ u.name }} - {{u.email}}
11. </li>
12. </ol>
13. <button class="btn btn-primary btn-block" v-on:click="refreshData">REFRESH</button>
14. </div>
15. <div v-else>
16. <div>Loading data...</div>
17. </div>
18. </div>
19. </div>
20. @section Scripts{
21. <script src="~/lib/vue/vue.js"></script>
22. <script src="~/js/VueSubscriberListComponent.js"></script>
23. }

在浏览器上运行应用，您的应用将如下所示。如果没有，请检查浏览器控制台是否有错误（请在提交stackoverflow问题之前检查它，它不是黑盒子）

现在是时候让我们使用你同事完成的Web API。
但事情并不像他们看起来那样，他昨天没有上传他的代码，看起来他正在擅离职守。
所以你现在被迫写一个虚拟的web api。

添加一个新的控制器，将名称设置为SubscribersController.cs然后粘贴此代码。

1. using System.Collections.Generic;
2. using Microsoft.AspNetCore.Mvc;
4. namespace WayKuratWeb.SimpleVueJs.Controllers
5. {
6. [Route("/api/[controller]/[action]/")]
7. public class SubscribersController : Controller
8. {
9. [HttpGet]
10. public IActionResult GetAll()
11. {
12. //hard coded data for brevity, this must be from a data store on the real world
13. var subs = new List<Subscriber>();
14. subs.Add(new Subscriber() { Id=1,Name = "JEK",Email="jekhaxor@test.test"});
15. subs.Add(new Subscriber() { Id = 1, Name = "Jikie", Email = "jekiedraws@test.test" });
16. return Ok(subs);
17. }
18. }
20. public class Subscriber
21. {
22. public int Id { get; set; }
23. public string Name { get; set; }
24. public string Email { get; set; }
25. }
26. }

现在添加了控制器，将使用ajax在我们的组件上使用它。
您准备编写一个发送XMLHttpRequest的简单js，但你的老板看到了它并坚持使用axios。
好吧，如果这就是他想要的，那就让我们做吧。

通过libman安装Axios。像安装vue时一样打开libman窗口。键入“axios”，然后选择文件，如下图所示。

在Index.cshtml上添加对axios的引用

1. @{
2. ViewData["Title"] = "Home Page";
3. }
4. <div class="text-center">
5. <div id="subscriber-list-component">
6. <h3>WayKurat Subscribers </h3>
7. <div v-if="isViewReady == true">
8. <ol>
9. <li v-for="u in subscribers">
10. {{ u.name }} - {{u.email}}
11. </li>
12. </ol>
13. <button class="btn btn-primary btn-block" v-on:click="refreshData">REFRESH</button>
14. </div>
15. <div v-else>
16. <div>Loading data...</div>
17. </div>
18. </div>
19. </div>
20. @section Scripts{
21. <script src="~/lib/vue/vue.js"></script>
22. <script src="~/lib/axios/axios.js"></script>
23. <script src="~/js/VueSubscriberListComponent.js"></script>
24. }

更新VueSubscriberListComponent.js以使用我们的web api

1. var subscriberListComponent = new Vue({
2. el: '#subscriber-list-component',
3. data() {
4. return {
5. subscribers: [],
6. isViewReady: false
7. };
8. },
9. methods: {
10. refreshData: function () {
11. var self = this;
12. this.isViewReady = false;
14. //UPDATED TO GET DATA FROM WEB API
15. axios.get('/api/subscribers/getall/')
16. .then(function (response) {
17. self.subscribers = response.data;
18. self.isViewReady = true;
19. })
20. .catch(function (error) {
21. alert("ERROR: " + (error.message|error));
22. });
23. }
24. },
25. created: function() {
26. this.refreshData();
27. }
28. });

您在浏览器上检查了您的应用程序，并按预期运行。您做了自己的部分，您已将代码上传到repo并准备午餐。
现在你刚刚使用了libman并编写了一个vue compoenent。

外部参考

你会在这里了解更多

https://vuejs.org/v2/guide/

https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.2

https://blog.csdn.net/mzl87/article/details/85055353