报错原因：
在vue中会出现以上问题，这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错。
解决方法：
有两种解决方法。
第一种（简单且快捷，但每次新建项目都要弄一次）：
将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例：
<template>
<div>
谢谢你的关注！
<span>麻烦点个免费的小红心吧</span>
<p>你相信光吗</p>
</div>
</template>第二种（麻烦，但一劳永逸）：
一、在VS Code中添加ESLint插件
二、在node全局路径中生成 eslint 的配置文件 .
1、路径一般在C:\Users\大圣\AppData\Roaming\npm\node_modules ，执行cmd
2、npm init 创建 文件
3、执行 eslint --init 创建配置文件
4、按照命令提示一直脱干净，全局文件就现身完成
三、在vscode中配置文件，设置
"": {
// 全局配置文件位置
"configFile": "C:/Users/大圣/AppData/Roaming/npm/node_modules/.",
},
四、vue@cli4.15版本发现的问题，无论取消设置vetur>Validation: Template还是在.中配置"vue/no-multiple-template-root": "off"，都是报错：root requires exactly one element;
将eslint升级后解决了：
"devDependencies": {
"eslint": "^8.6.0",
"eslint-plugin-vue": "^8.2.0"
},
注意：在项目中还需要取消依赖：@vue/cli-plugin-eslint，否则会报错：
is not a constructor