我正在使用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>
如何解决错误?
答案 0 :(得分:2)
Vue组件通常与export default { /* ... */}
一起导出,因此它有助于默认导入,如import Component from './component.vue'
(ES6语法)
使用require()
(CommonJS)时,您必须指明您需要default
导出:
var vueComponent = require('./component.vue').default;