Vue3项目Eslint提示 the template root requires exactly one element

问题如下描述：

在创建了vue3.0的项目时发现，.vue文件的写法是按照vue3.0的来的，但是eslint还是会报错，提示：

the template root requires exactly one element

产生原因：

Vue3.0以前版本在template标签下只允许有一个标签

<template>
  <div>code</div>
</template>

<script>
export default { 
  // code 
}
</script>

所以在 eslint 的插件 vue/recommended 中有一条规则是vue/no-multiple-template-root，用来提示开发者，注意规范操作

但是从vue3.0开始就支持在template里面有多个标签，

而我们用的插件如果没有变化，甚至会从其它vue2.0项目拷贝信息过来的话，此时就会有这个问题了

问题产生的点在这里：extends: ['plugin:vue/recommended', 'eslint:recommended']

解决方案很简单：

plugin:vue/recommended 改为 plugin:vue/vue3-recommended

module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
  }

这样就不会报错了，原因很简单，咱们使用了3.0以前版本的rules改成3.0的就好了