将 vue js 与 asp.net core 2.1 集成答案

【问题标题】：integrate vue js with asp.net core 2.1将 vue js 与 asp.net core 2.1 集成
【发布时间】：2018-06-21 09:40:19
【问题描述】：

谁能帮助解释我如何将 vue.js 与 asp.net core 2.1 一起使用。理想情况下，我只想在 Visual Studio 2017 中按 f5 并加载网站。

我知道 ms 以前有 spa 模板，但它们似乎已被放弃。 github 上也有一个入门模板，但它使用的是 .net core 2.0。

【问题讨论】：

见Retiring the Microsoft.AspNetCore.SpaTemplates package (Aurelia/Knockout/Vue templates)和Asp.NETCore 2.0 Vue 2 Starter。

标签： asp.net-core vue.js single-page-application

【解决方案1】：

我目前正在尝试将 Vue.js 与 MVC Core 2.1 一起用于多页面应用程序，并找到了一个可行的解决方案。
我看到你提到了 SPA，我的回答是针对多页应用程序，但其中一些想法可能适用。

我的方法

我在wwwroot/resources/js/ 中创建了一个main.js 文件，并在该目录中创建了一个components 子文件夹，还在组件一中创建了一个layout 文件夹。

在main.js 中，我创建了一个Vue 实例并将其附加到HTML 中的#app 根元素。在这个 js 文件中，我还全局注册了大部分组件，除非它们仅用于特定组件。我的main.js 看起来像这样：

# wwwroot/resources/js/main.js

import Vue from 'vue';
import Axios from 'axios';
import BaseLayout from './components/layout/BaseLayout.vue';

window.axios = Axios;

Vue.component("base-layout", BaseLayout);
new Vue({
    el: "#App"
});

在_layout.cshtml 文件中我有以下（相关内容）：

# Views/Shared/_Layout.cshtml
<div id="App">
    <base-layout>
        @RenderBody()
    </base-layout>
</div>

<script src="~/resources/js/bundle.js"></script>

如果您只对 SPA 感兴趣 - 我可能会这样做：

# wwwroot/resources/js/main.js

import Vue from 'vue';
import App from './App.vue';
new Vue({
    el: "#app",
    render: (h) => h(App)
});

# wwwroot/resources/js/App.vue

<template>
    <div id="app">
         <-- Use other components here -->
    </div>
</template>

<script>
    export default {
        name: "app",
        data: function() {
            return {
                // What evs
            }
        }
    }
</script>

【讨论】：

【解决方案2】：

VueJs（连同 Angular 和 ReactJs）在新项目的一个阶段可用，但后来由于维护人员有限而被删除。但是，您仍然可以通过命令行创建 VueJs 应用程序。运行 dotnet new -l 以查看可用的 dotnet 模板列表。

如果您在列表中没有看到 vuejs，请安装模板

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

一旦您创建了 Web 应用程序，并在 VS 中打开它，您应该能够像任何其他项目一样运行它，只需按 F5。

网上有一些不错的资源：

Asp.NETCore 2.1 Vue 2 Starter - by DevHelp.Online

Creating a VueJS (with TypeScript) SPA on ASP.Net Core 2.1

第二个链接提到 vuejs 模板仍然可以通过命令行使用。

我还发现这个系列内容非常丰富，从设置到部署进行了解释。

https://code-maze.com/net-core-series/

【讨论】：

为什么会被否决？准确回答问题的内容。

【解决方案3】：

如果您正在构建一个多页面应用程序，您可以查看此模板作为示例或起点。

https://github.com/danijelh/aspnetcore-vue-typescript-template

如果您正在构建 SPA，请考虑将您的 API 从您的 UI 中分离出来，并将Vue CLI 3 用于 UI 部分。

【讨论】：