vue.js - 无法设置未定义的属性 'render'

Question

我遇到了vuejs的问题，请帮助我

我有 main.js:

    import App from './App.vue'
    import routes from './app.router';
        Vue.use(BootstrapVue);
        
        new Vue({
            el:'#app',
            render: h => h(App),
            created(){
            },
            router: routes,
            methods:{
        
            }
        })

我的文件 App.vue:

    <template>
        <div id="app" class="">
            <menu-header> </menu-header>
            <router-view> </router-view>
        </div>
    </template>
    
    
    <script>
    import menuHeader from './components/layout/menu-header.vue'; // error when i import this component
    components:{
        menuHeader
    }
    </script>

这是我的 menu-header.vue:

     <template>
        <ul>
            <li>
                Hello           
            </li>
        </ul>
     </template>
    
     <script>
     export default {
        name: "menuHeader"
     };
    
     </script>

我的问题是当我添加菜单标题组件时，我的页面出现错误:

Cannot set property 'render' of undefined

但如果我不这样做，它会正常运行。请解释原因并帮助我修复它。非常感谢。

Answer 1

看起来您没有从 App.vue 文件中正确导出 Vue 组件定义:

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


<script>
    import MenuHeader from './components/layout/menu-header.vue'; // error when I import this component

    // Code is missing export
    export default {
        components: {
            MenuHeader
        }
    }
</script>