Vue.js:无法挂载组件:未定义模板或渲染函数 [英] Vue.js: Failed to mount component: template or render function not defined
问题描述
我正在使用 Vue.js 2 构建我的第一个应用程序，但无法找出错误.
我正在使用完整版本 (webpack.config.js):
解析:{别名:{'vue$': 'vue/dist/vue.js',"vueRouter$": "vue-router/dist/vue-router.js"},扩展名:['*', '.js', '.vue', '.json']},我的 html:
<adv-component></adv-component>我的main.js:
const Vue = require('vue');var vueComponent = require('./component.vue');var app = new Vue({el: '#app',数据: {},//本地注册成分: {'adv-component': vueComponent,}});component.vue:
<div>你好单文件组件！</模板><脚本>导出默认{数据 () {返回0；}}
错误:
[Vue 警告]:无法挂载组件:未定义模板或渲染函数.在发现---><高级组件>如何修复错误?
Vue 组件通常使用 export default {/* ... */} 导出，因此它有助于默认导入，例如 import Component from './component.vue'(ES6 语法)
使用 require() (CommonJS) 时，您必须指定您需要 default 导出:
var vueComponent = require('./component.vue').default;I'm building my first app with Vue.js 2, and can't figure out the error.
I'm using full build (webpack.config.js):
resolve: {
alias: {
'vue$': 'vue/dist/vue.js',
"vueRouter$": "vue-router/dist/vue-router.js"
},
extensions: ['*', '.js', '.vue', '.json']
},
My html:
<div id="app">
<adv-component></adv-component>
</div>
My 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>
The error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <AdvComponent>
How can I fix the error?
A Vue component is usually exported with export default { /* ... */} so it facilitates the default import like import Component from './component.vue'(ES6 syntax)
When using require() (CommonJS) you have to specify you are requiring the default export:
var vueComponent = require('./component.vue').default;
这篇关于Vue.js:无法挂载组件:未定义模板或渲染函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
