Question

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

但它什么都没有呈现，我只看到了我的broswer中的main-menu和router-view标签......

当我编辑我的HTML并将其放在那里时：

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

当我试图进入Facebook路线时，我收到此错误：

[Vue警告]：无法安装组件：模板或渲染函数未定义。

并且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文件包含：

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

我编辑我的html文件以包含

我在app.js中添加了

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

 });

我的html文件包含：

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

发生这种情况是因为facebook组件，当我在主页面中我没有看到错误时，只有当我进入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')

        }
      ]
    });

它的工作

非常感谢每一位试图帮助我的人

如何构建应用程序模板Vue

2 个答案: