The template root requires exactly one element.eslint-plugin-vue

原因：代码飘红，提示The template root requires exactly one element.eslint-plugin-vue。我们知道，vue2中，每个组件的<template>标签只能有一个根节点，所以插入第二个根节点会报错。但是vue3中，每个组件的<template>标签可以有多个根节点。这是因为我们安装的Vetur扩展插件导致的，它有验证规则，提示开发者注意规范，但这个规范只适用于vue2。

解决方案：

1、修改 Vetur 扩展插件的验证规则

（1）点击vscode左下角的设置，输入template，找到如下截图的验证规则，去掉勾选☑️

（2）重启vscode即可

如何重启vscode：ctrl+shift+p，选择 Reload Window 即可

（3）最终代码效果：

2、vue3官网 推荐使用Volar来替换Vetur