将 VueJS 集成到 ASP.NET 核心中，无需 nodejs、webpack 或 npm

Question

由于安全原因，我们无法安装 nodejs 和任何 package 管理器。 因此，我正在尝试仅使用 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>

将 VueJS 集成到 ASP.NET 核心中，无需 nodejs、webpack 或 npm

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-29 06:55:54

将 VueJS 集成到 ASP.NET 核心中，无需 nodejs、webpack 或 npm

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-29 06:55:54

解决方案1
1 已采纳 2021-03-29 06:55:54