為何我的 vue 實(shí)例已經(jīng)創(chuàng)建了，但是頁面上卻什么都沒有顯示？

新人，剛開始學(xué)習(xí) vue + webpack，一步步自己搭建。運(yùn)行頁面后，編譯沒有報(bào)錯(cuò)，頁面也沒有報(bào)錯(cuò)，貌似 vue 實(shí)例已經(jīng)成功創(chuàng)建了。index.html 里的 <div id="app"></div> 不見了，應(yīng)該是被替換掉，但是頁面卻顯示空白，想不明白，請(qǐng)教各位：

<head>
    <link rel="stylesheet" >
</head>
<body>
    <div id="app"></div>
    <script src="http://http://10.0.0.2:111/scripts/build.js"></script>
</body>

上面是 index.html

<template>
    <div id="app"></div>
</template>
<script>
    export default {
        name: "app"
    }
</script>
<style scoped></style>

上面是 App.vue

import Vue from 'vue';
import router from './router';
import store from './store';
import App from '../../../components/App.vue';
new Vue({
    el : '#app',
    router,
    store,
    components : {App},
    template : "<App/>",
    created(){
        this.$router.push({name : "index"});
        console.log("create", this);
    },
});

<template>
    <div>{{ name }}</div>
</template>
<script>
    export default {
        data () {
            return{
                name : "hellow",
            }
        },
        created () {
            console.log("index", this);
        },
    }
</script>
<style scoped></style>

上面是 index.vue

import Vue from 'vue';
import VueRouter from 'vue-router';
import index from '../../../../components/index.vue';
Vue.use(VueRouter);
const routes = [{path : "/index" , name :"index" , component : index},];
export default new VueRouter({routes})

前面漏了 router 配置，現(xiàn)在補(bǔ)上。

結(jié)果實(shí)際頁面上顯示的是：

<head>
    <link rel="stylesheet" >
</head>
<body>
    <!--function(e,n,r,o){return Oe(t,e,n,r,o,!0)}-->
    <script src="http://http://10.0.0.2:111/scripts/build.js"></script>
</body>

控制臺(tái)里輸出了 “created” 那句話，沒有輸出 “index", 我就想不明白了，不報(bào)錯(cuò)的話，為什么 index.vue 里面的內(nèi)容會(huì)沒有生成，我覺得是模板指向之類的問題錯(cuò)了，但是搜了很久也想不到原因，請(qǐng)各位指點(diǎn)下。

回答

編輯回答

陪妳哭

咦~，你這個(gè)自然是不會(huì)顯示的啦，Index.vue都沒有在任何地方被引入，怎么會(huì)出現(xiàn)呢？
你要在App.vue文件中使用這個(gè)組件的話，兩種方式。
第一種，單獨(dú)把這個(gè)文件引入到App.vue，并且加入components選項(xiàng)中，然后在template模板中使用。
第二種，在App.vue中使用router-view組件，并在router/index.js中加入路由映射?？吹侥愕睦又?，在Vue根實(shí)例中調(diào)用$router.push，那么這里有3個(gè)問題。1.沒有在根實(shí)例模板使用router-view 2.沒有在router/index.js中注冊(cè)路由 3. 通常是不在new Vue里這么干啦。先使用vue-cli創(chuàng)建一個(gè)demo看看吧。

對(duì)于上面的第一種方式，使用vue-cli 3.0，創(chuàng)建一個(gè)demo，看里面的HelloWorld.vue和App.vue文件就明白了。
建議先了解一下Vue實(shí)例化的各個(gè)選項(xiàng)、單文件組件。

2018年4月28日 13:19

編輯回答