Vue Js将多个组件放入app.vue

Question

我有以下代码，我收到以下错误：

Failed to mount component: template or render function not defined.

我想在app.vue中包含顶部和底部导航 我怎样才能做到这一点？

Main.js：

new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { 'App':App }
})

App.vue：

<template>
    <div id="app">
        <navigationtop></navigationtop>
        <navigationbottom></navigationbottom>
        <router-view/>
    </div>
</template>
<script>
    import navigationtop from './components/navigation/top'
    import navigationbottom from './components/navigation/bottom'

    export default {
        name: 'app',
        components: {
            'navigationtop': navigationtop,
            'navigationbottom': navigationbottom
        }
    }......

路由器：

export default new Router({
routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
 ]
 })

的HelloWorld：

<template> </template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'}}}
</script>

Answer 1

尝试像这样导入您的应用：

import App from './foobar/App.vue'

并将其呈现在您的Vue（{}）对象中，如：

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