私はVueのへとES6 に新たなんだと、私は次のようでしたアプリケーションテンプレートのVue

Question

をbulidする方法：

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import $ from 'jquery' 
Vue.use(VueRouter) 
var App = {}; 
App.template = ` 
<main-menu></main-menu> 
<router-view></router-view>`; 

const header = Vue.component('main-menu', require('./components/app/header.vue')); 
const facebook = Vue.component('facebook-gif', require('./components/facebook.vue')); 

const router = new VueRouter({ 
routes: [ 
    { 
     path: '/', 
    }, 
    { 
     path: '/facebook', 
     component: { 
      facebook: facebook 
     } 
    } 
    ] 
}); 

App.app = new Vue({ 
    router, 
    render (h) { 
     return h(`div`, App.template) 
    } 
}).$mount('#app'); 

しかし、それは何もレンダリングしない何、私はちょうど私のbroswerでmain-menuとrouter-viewタグを参照してください。 ..

そして、私は私のHTMLを編集して、そこにこの置くとき：私はFacebookのルートを入力しようとしているこのエラーを取得する

<div id="app"> 
    <main-menu></main-menu> 
    <router-view></router-view> 
</div> 

を：

[Vue warn]: Failed to mount component: template or render function not defined.

とFacebookのテンプレートtemplateタグでラップし、それがVUEファイル内 facebook.vue

<template> 
    <div> 
    dsfsdsfdsf 
     <div v-if="showLogin"> 
      <button v-on:click="login">Log In With Facebook</button> 
      <span v-if="error">{{ error }}</span> 
     </div> 
    </div> 
</template> 


<script> 
export default { 
    data() { 
     return { 
      showLogin: true, 
      error:null, 
     } 
    }, 
    methods() { 
     return { 
      login() { 

      } 
     } 
    } 
} 
</script> 

しかし、メインメニューコンポーネントのレンダリングされている...

問題は何ですか？

wostexが
私はApp.vueファイルを作成して言ったように私は例をダウンロードし EDITは含まれています

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

私はapp.js

に追加

を含むように私のhtmlファイルを編集します

import App from './components/App.vue' 
const v = new Vue({ 
    el: "#app", 
    router, 
    render: h => h(App) 

}); 

と私のhtmlファイルルは含まれています

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

と私はこのエラーを取得する：

私はメインページにいる時にFacebookのコンポーネントは、私が入力したときにのみ、エラーが表示されていないので、それが起こる

vue.common.js:436 [Vue warn]: Failed to mount component: template or  render function not defined. 

    found in 

---> <Anonymous> 
    <App> at  /opt/lampp/htdocs/gif/resources/assets/js/components/App.vue 
    <Root> 

Facebookのルート

Answer 1

私たちが使っているビルドのために最初のセットアップが失敗したようです。例えばのため：

App.app = new Vue({ 
    router, 
    render (h) { 
     return h(`div`, App.template) // this part can be roughly 
     // translated to `return h(`div`, 
     // `<one-component></one-component> 
     // <router-view></router-view>`)` and I believe 
     // this failed due to the fact that when you pass 
     // template string to the render method it needs to 
     // be compiled and your setup didn't account for that. 
    } 
}).$mount('#app'); 

あなたの他のセットアップ（@wostexの提案どおりに）はるかに優れているが、私はここにあなたがあなたのVueの初期化の終わりに.$mount('#app')に欠けていると思います。だから、：

const v = new Vue({ 
    router, 
    render: h => h(App) 
}).$mount('#app') 

Answer 2

私は彼がそのようにそこにいたのVue についてJeffryチュートリアルでLaracastsを見て：

const router = new VueRouter({ 
    routes: [ 
     { 
      path: '/', 
     }, 
     { 
      path: '/facebook', 
      component: require('./components/facebook.vue') 

     } 
     ] 
    }); 

とそれ仕事の

だから、感謝私

助けようとした一人一人