首页 > 解决方案 > 我的 VueJS 应用程序未呈现 - 我查看了有关堆栈溢出的其他解决方案,但似乎都没有解决我的问题

问题描述

我有一个需要渲染的简单 Vue.Js 应用程序,但该应用程序根本没有被渲染。

我遵循了在线显示的所有示例,一切看起来都正确,但我无法发现问题。我在带有 webpack 的 ASP.net 应用程序上使用 Vue.js

我的 Index.cshtml:

@section scripts{
    <environment names="Development,Production,Staging">
        <script src="~/dist/js/home/bundle.js" asp-append-version="true"></script>
    </environment>
}
<div id="app">
</div>

我的主要 app.js:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.config.performance = true;

Vue.use(VueRouter);

import store from './store/store';
import { router } from './router/router';

import App from './App.vue';

new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App)
});

我的应用程序.vue:

<template>
    <div>
        <div class="container">
            <div class="columns">
                <div class="column is-3">
                    <section class="section">
                        <aside class="menu">
                            <p class="menu-label">
                                Examples
                            </p>
                            <ul class="menu-list">
                                <li>
                                    <router-link :to="{ name: 'counter' }">Counter</router-link>
                                </li>
                            </ul>
                            <p class="menu-label">
                                About
                            </p>
                            <ul class="menu-list">
                                <li>
                                    <router-link :to="{ name: 'moduleinfo' }">Module info</router-link>
                                </li>
                            </ul>
                        </aside>
                    </section>
                </div>
                <div class="column is-9">

                    <section class="section">
                        <transition name="component-fade"
                                    mode="out-in">
                            <router-view></router-view>
                        </transition>
                    </section>

                </div>
            </div>
        </div>
        <notifications group="global" />
    </div>

</template>
<script>
import Vue from 'vue'
import Notifications from 'vue-notification'

Vue.use(Notifications)

export default {
  name: 'App'
    }
</script>
<style scoped>

</style>

没有抛出错误,应用程序根本不呈现,当我运行应用程序时页面上唯一的 html 是

<div id=app>
</div>

标签: vue.jswebpack

解决方案


推荐阅读