在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組件。