[Vue警告]：要素が見つかりません - 空のコンテナがレンダリングされます

Question

Vue 2フレームワークを学習しようとしていますが、このエラーが発生しました。

main.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import VueResource from 'vue-resource' 
import App from './App.vue' 
import Posts from './components/Posts.vue' 
import Routes from './routes/routes' 

Vue.config.productionTip = false 

Vue.use(VueRouter) 
Vue.use(VueResource) 

const router = new VueRouter({ 
    routes: Routes 
}) 

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

App.vue

<template> 
    <div id="app"> 
    <router-view></router-view> 
    </div> 

</template> 

<script> 
    import Posts from './components/Posts.vue' 

    export default { 
    name: 'app', 
    components: { 
     Posts 
    } 
    } 
</script> 

<template> 
    <div id='root'> 
     <h1>Test</h1> 
     <input type="text" v-model="message"> 
    </div> 
</template> 

Posts.vue

<script> 
    import Vue from 'vue' 

    window.addEventListener('load', function() { 
     new Vue({ 
      el: '#root', 
      data: { 
       message: 'Hello World!' 
      } 
     }) 
    }) 
</script> 

これらのスクリプトは次のとおりです。私は、次の自分のアプリケーションの機能を担当するスクリプトを持っていますページの最後に含まれています。重要なのは、 'app'のid値を持つdivは空であるということです。私はwebpackにも新しかったので、私の輸入と輸出に問題があると思いますが、残念ながらそれを自分で解決することはできませんでした。 <router-view>コンポーネントは、現在の通りの構成要素を示すであろうApp.vue

<template> 
    <div id="app"> 
    <router-view></router-view> 
    </div> 
</template> 

で

import Posts from '../components/Posts.vue' 

const routes = [ 
    { path: '/', component: Posts } 
] 

export default routes 

Answer 1

<div id="app"></div> 

UPD（router.js）：インデックスページは、単にこの含有しますルート。

import Posts from '../components/Posts.vue' 

const routes = [ 
{ path: '/', component: Posts } 
] 

export default routes 

ここでは、<router-view>がPostsコンポーネントを示すであろうことは明らかです。

Posts.vue

<template> 
    <div id='root'> 
    <h1>Test</h1> 
    <input type="text" v-model="message"> 
    </div> 
</template> 

<script> 
import Vue from 'vue' 

window.addEventListener('load', function() { 
    new Vue({ 
     el: '#root', 
     data: { 
      message: 'Hello World!' 
     } 
    }) 
}) 
</script> 

ルータにフラッシュバック、という行があります：

import Posts from '../components/Posts.vue' 

これは輸入デフォルトの構文ですが、何がPosts.vueによってエクスポートされていますか？したがって、ルータには何もインポートされません。したがって、#appの内部にレンダリングされるものはありません。

また、投稿はnew Vue(...)インスタンスである必要はありません。

<template> 
    <div id='root'> 
    <h1>Test</h1> 
    <input type="text" v-model="message"> 
    </div> 
</template> 

<script> 
import Vue from 'vue' 

export default { 
    data: { 
    message: 'Hello World!' 
    } 
} 
</script> 

うまくいくでしょうか。これにより、ルータが使用するデフォルトのエクスポートが実行されます。