在 Vue Js 应用程序中找不到元素

Question

我使用 Visual Studio 2017 创建了 vue js 应用程序。但问题是当我运行应用程序时，我在 google chrome 控制台窗口中出现以下错误。

[Vue 警告]：找不到元素：#intro [Vue 警告]：您正在使用仅运行时构建的 Vue，其中模板编译器不可用。将模板预编译为渲染函数，或使用编译器包含的构建。

这是 App.vue 的代码...

<template>
    <div id="app">
        <Home msg="Hello world!" />
    </div>
</template>

<script>
    import Home from './components/Home.vue';
    import component1 from './components/component1.vue';

    export default {
        name: 'app',
        components: {
            Home,
           component1

        }

    };


</script>

<style>
</style>

这是component1.vue的代码..

<template>




    <div class="intro" style="text-align:center;">
        <h1>{{ message }}</h1>
    </div>


</template>

<script type="text/javascript">
    import Vue from 'vue';
    new Vue({
        el: '#intro',
        data: {
            message: 'My first VueJS Task'
        }
    });
</script>

<style scoped>
</style>

这是谷歌控制台窗口的屏幕截图..

Answer 1

您在元素上设置了class，而不是id。

但这无论如何都无关紧要，因为对于单个文件组件，您不需要任何这些；只需这样做（就像您对 App.vue 所做的那样）：

<template>
    <div class="intro" style="text-align:center;">
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'My first VueJS Task'
            }
        }
    }
</script>

使用new Vue()手动构造一个Vue组件仅对根组件实例是必要的。