vue3报错：The template root requires exactly one element

在 vue2 的模版中要求有且仅有一个根结点，但 vue3 则允许多个根结点，增加模版的灵活性。

vue2，template 中只能有一个根元素

<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <button @click="increase"></button>
    <button @click="decrease"></button>
  </div>
</template>

vue3

<template>
  <h1>{{ count }}</h1>
  <button @click="increase"></button>
  <button @click="decrease"></button>
</template>

但当我们使用 vscode 创建 vue 项目时，可能会出现 Vue Error: The template root requires exactly one element 的报错提示。

报错的原因是，我们使用 vetur 插件，其带有检查语法的功能，因此加载之后会出现报错。

解决方法：

1. 按照 vue2 的格式要求，在多个根结点外部嵌套一个<div>标签。

但导致需要额外添加一个包裹性的元素容纳多个子元素，在某些情况下不是必要的，可能造成一定的干扰。

2. 既然是因为使用 vetur 插件造成的，那么我们关闭该提示也可以解决。（推荐）

最后，记得重启一下 vscode 让操作生效哦。