在读vue文档的时候,感觉在介绍.vue模板的时候写的很随意,什么不清楚到底vue-loader编译后的组件和不用.vue组件有什么异同。果然在使用的过程中遇到里很多低级的问题。
下面是我报错的模板
<template>
<div>
index{{msg}}
</div>
<router-link to="/">Go to Bar</router-link>
</template>
<style>
</style>
<script>
export default {
data() {
return {
msg: '请叫我守夜'
}
}
}
</script>
报错信息
template syntax error Component template should contain exactly one root element:
错误信息很明确,模板只应该有一个根元素
修改
<template>
<div>
index{{msg}}
<router-link to="/">Go to Bar</router-link>
</div>
</template>
<style>
</style>
<script>
export default {
data() {
return {
msg: '请叫我守夜'
}
}
}
</script>
总结:模板所有的内容都应该在一个根元素内,通常会用给一个div来包裹其他元素