vue--The template root requires exactly one element.的解决办法

报错原因：

在vue中会出现以上问题，这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错。

解决方法：

有两种解决方法。

第一种（简单且快捷，但每次新建项目都要弄一次）：

将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例：

<template>
  <div>
    谢谢你的关注！
    <span>麻烦点个免费的小红心吧</span>
    <p>你相信光吗</p>
  </div>
</template>

第二种（麻烦，但一劳永逸）：

一、在VS Code中添加ESLint插件

二、在node全局路径中生成 eslint 的配置文件 .eslintrc.js

1、路径一般在C:\Users\大圣\AppData\Roaming\npm\node_modules ，执行cmd

2、npm init 创建 package.json 文件

3、执行 eslint --init 创建配置文件

4、按照命令提示一直脱干净，全局文件就现身完成

三、在vscode中配置文件，设置

"eslint.options": {

    // 全局配置文件位置

        "configFile": "C:/Users/大圣/AppData/Roaming/npm/node_modules/.eslintrc.js",   

    },

四、vue@cli4.15版本发现的问题，无论取消设置vetur>Validation: Template还是在.eslintrc.js中配置"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，否则会报错：

eslint.CLIEngine is not a constructor