在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>

这是Google控制台窗口的屏幕截图。

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组件。