目录

需求

解决方案

外部参考

在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";
}
<div class="text-center">
    <div id="subscriber-list-component">
        <h3>WayKurat Subscribers </h3>
        <div v-if="isViewReady == true">
            <ol>
                <li v-for="u in subscribers">
                    {{ u.name }} - {{u.email}}
                </li>
            </ol>
            <button class="btn btn-primary btn-block" v-on:click="refreshData">REFRESH</button>
        </div>
        <div v-else>
            <div>Loading data...</div>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/lib/vue/vue.js"></script>
    <script src="~/js/VueSubscriberListComponent.js"></script>
}

在浏览器上运行应用，您的应用将如下所示。如果没有，请检查浏览器控制台是否有错误（请在提交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<Subscriber>();
            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";
}
<div class="text-center">
    <div id="subscriber-list-component">
        <h3>WayKurat Subscribers </h3>
        <div v-if="isViewReady == true">
            <ol>
                <li v-for="u in subscribers">
                    {{ u.name }} - {{u.email}}
                </li>
            </ol>
            <button class="btn btn-primary btn-block" v-on:click="refreshData">REFRESH</button>
        </div>
        <div v-else>
            <div>Loading data...</div>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/axios/axios.js"></script>
    <script src="~/js/VueSubscriberListComponent.js"></script>
}

更新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