[Vue warnen]: Kann Element nicht finden - leerer Container ist gerendert

Question

Ich versuche Vue 2 Framework zu lernen, und ich bin mit diesem Fehler fest. Ich habe folgende Skripte verantwortlich für die Funktionalität meiner Anwendung:

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> 

Diese Skripte sind am Ende der Seite enthalten. Wichtig zu erwähnen, dass das div mit dem ID-Wert von 'app' leer ist. Ich bin auch neu bei Webpack, also würde ich annehmen, dass es ein Problem mit meinen Importen und Exporten gibt, aber leider konnte ich es nicht selbst lösen. Indexseite enthält einfach dies:

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

UPD (router.js)

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

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

export default routes 

Answer 1

In App.vue

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

Die <router-view> Komponente, die Komponenten gemäß der aktuellen zeigen Route.

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

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

export default routes 

Hier wird deutlich, dass <router-view> die Posts Komponente zeigen würde.

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> 

Rückblick auf den Router gibt es eine Zeile, die sagt:

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

dies ist der Import Standard-Syntax, aber was von Posts.vue exportiert wurde? Daher wird nichts in den Router importiert. Daher wird nichts innerhalb der #app gerendert.

Auch Beiträge müssen keine new Vue(...) Instanz sein.

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

Wird nur gut. Damit ist ein Standardexport vorhanden, den der Router verwenden kann.