VueのJsの複数のコンポーネント

Question

I持っていると私は、次のエラー取得しています次のコード：私はどのように私は達成することができますapp.vue に上部と下部のナビゲーションを含める

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

をそれ？

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