在没有 nodejs、webpack 或 npm 的情况下将 VueJS 集成到 ASP.NET 核心

Question

出于安全原因，我们无法安装 nodejs 和任何包管理器。因此，我正在尝试仅使用 cdn 支持来构建我的 SPA。但是，我正在努力让它工作，因为当运行我的代码时，我不断收到无法安装模板错误。我正在使用 ASP.NET 核心 3.1，我能够访问页面以加载显示侧边导航和顶部导航项的部分视图。页面加载完毕，路由器似乎可以更改浏览器中的 url，但实际页面模板的视图组件不会显示在屏幕上。例如，仪表板视图应该显示但没有显示，因此我认为这就是问题所在，但我看不出我的代码有任何问题。

我的代码如下： _vueapp:

<!DOCTYPE html>
<html lang="en">
<head>
    @RenderSection("Styles", required: false)
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewData["Title"] - ARMS 2.0</title>
    <link rel="stylesheet" href="~/css/sidebar.css" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
    @RenderBody()
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

索引文件

@page
@model ARMS_2._0_LOCAL.Pages.vue.IndexModel
@{
    Layout = "_Vueapp";
}

<div id="app" v-cloak>
    <side-navigation></side-navigation>
    <top-navigation></top-navigation>
    <router-view></router-view>
</div>

@section Scripts
{
    <partial name="components/side-navigation" />
    <partial name="components/top-navigation" />
    <partial name="views/dashboard" />
    <partial name="views/reviews" />

    <script>

        //setup routing using SPA VUE interface
        Vue.use(VueRouter);
        const routes = [
            { path: '/', component: dashboard },
            { path: '/reviews', component: reviews }
        ]
        const router = new VueRouter({
            routes // short for `routes: routes`
        })

        var app = new Vue({
            el: '#app',
            router
        }).$mount('#app')
    </script>
}

侧边导航：

<style>

</style>
<template id="side-navigation">
    <div>
        <router-link to="/">Home</router-link>
        <router-link to="/reviews">Reviews</router-link>
    </div>
</template>
<script>
    Vue.component('side-navigation', {
        template: '#side-navigation'
    })
</script>

我的一个观点是仪表板：

<style>

</style>
<template id="dashboard">
    <div>
        <h1>dashboard</h1>
    </div>
</template>
<script>
    Vue.component('dashboard', {
        template: '#dashboard'
    })
</script>

Answer 1

您需要将组件（仪表板和评论）分配给一个常量，否则路由器无法识别它们。

仪表板：

<style>
</style>
<template id="dashboard">
    <div>
        <h1>dashboard</h1>
    </div>
</template>
<script>
    const dashboard = Vue.component('dashboard', {
        template: '#dashboard'
    })
</script>

评论：

<style>
</style>
<template id="reviews">
    <div>
        <h1>reviews</h1>
    </div>
</template>
<script>
    const reviews = Vue.component('reviews', {
        template: '#reviews'
    })
</script>

在没有 nodejs、webpack 或 npm 的情况下将 VueJS 集成到 ASP.NET 核心

Integrating VueJS into ASP.NET Core without nodejs, webpack, or npm

vue.js

asp.net-core

vuex

vuejs2

razor-pages