Vue.js:无法安装组件:模板或渲染函数未定义

时间:2018-01-15 15:57:46

标签: javascript webpack vuejs2

我正在使用Vue.js 2构建我的第一个应用程序,但无法弄清楚错误。

我正在使用完整版本(webpack.config.js):

 resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js',
            "vueRouter$": "vue-router/dist/vue-router.js"
        },
        extensions: ['*', '.js', '.vue', '.json']
    },

我的HTML:

<div id="app">
    <adv-component></adv-component>
</div>

我的main.js

const Vue = require('vue');
var vueComponent = require('./component.vue');
var app = new Vue({
    el: '#app', 
    data: {

    },
    // Local registration
    components: {
        'adv-component': vueComponent,
    }
});

component.vue

<template id='asd'>
    <div>
        Hello Single File Component!
    </div> 
</template>

<script>
    export default {     
        data () {
            return 0;
        }
    }  
</script>

错误:

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

found in

---> <AdvComponent>

如何解决错误?

1 个答案:

答案 0 :(得分:2)

Vue组件通常与export default { /* ... */}一起导出,因此它有助于默认导入,如import Component from './component.vue'(ES6语法)

使用require()(CommonJS)时,您必须指明您需要default导出:

var vueComponent = require('./component.vue').default;