Ecmascript 6 如何创建应用程序模板Vue

我是Vue和ES6的新手 我做了以下几件事：

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');

当我尝试进入facebook路线时，我会出现以下错误：

[Vue warn]：未能装载组件：未定义模板或呈现函数

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>

我编辑html文件以包含

我在app.js中添加了

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

 });

我的html文件包含：

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

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

我得到了这个错误：

 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>

vue.common.js:436[vue warn]：未能装载组件：未定义模板或渲染函数。
发现于
---> 
位于/opt/lampp/htdocs/gif/resources/assets/js/components/App.vue

---

这是因为facebook组件，当我在主页上时，我没有看到错误，只有当我进入facebook路线时，你的第一次设置似乎失败了，因为我们使用的是什么构建。例如：

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');

---

我看了Jeffry教程中关于Vue的Laracast 他是这样做的：

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

        }
      ]
    });

而且很有效

---

因此，感谢所有试图帮助我查看设置示例的人。@wostex请查看我的编辑

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

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

        }
      ]
    });