本文共 4151 字，大约阅读时间需要 13 分钟。

目录

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

接下来粘贴这个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。

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在我们的组件上使用它。

在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并准备午餐。

外部参考

你会在这里了解更多

原文地址：

转载地址：http://xzzhj.baihongyu.com/