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

這些腳本包含在頁面末尾。 重要的一點是id為'app'的div為空。 我也是webpack的新手，所以我想假設我的進出口存在問題，但是很遺憾，我自己無法解決問題。 索引頁僅包含以下內容：

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

UPD （router.js）

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

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

export default routes 

Answer 1

在App.vue中

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

<router-view>組件將顯示根據當前路由的組​​件。

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內部#app呈現任何#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>

會做的很好。 這樣，路由器就可以使用默認導出。