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來包裹其餘元素