vue报错--template syntax error Component template should contain exactly one root element

在读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来包裹其余元素