Question

有人可以帮助解释我如何将vue.js与asp.net core 2.1一起使用。理想情况下，我只是想在Visual Studio 2017和网站负载中按f5键。

我知道女士以前有水疗中心模板，但似乎已被放弃。 github上也有一个入门模板，但是使用的是.net core 2.0。

Answer 1

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

我的方法

我已经在main.js中创建了一个wwwroot/resources/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>