vue3 中在vscode 提示 The template root requires exactly one element

在VUE3中，如果安装了eslint，则会提示The template root requires exactly one element，这个是在VUE2中是必须放在一个跟dom节点中，而在VUE3中则是可以不放在一个跟dom节点中，那如何解决这个错误提示呢？

错误图示如下：

有两种方法可以解决：

方法一

在项目的.eslintrc.js或者.eslinttc.cjs配置文件的rules中添加："vue/no-multiple-template-root": "off"

 rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "vue/no-multiple-template-root":'off' 
  }

这样，重新打开文件，错误就解决了。

方法二

如果说方法一，重新打开文件还是有错误提示，则有可能安装了某个带有检查语法的功能，比如 vetur

第一步，在扩展Extensions 查找下是否安装过 vetur

第二步，找到设置小icon，点击Extension Setting，进去找到Validation: Template ,取消选中即可。不清楚的可以查看如下操作图。

669_1665801653 (2).gif

或者 首选项 -> Setting，输入 eslint 关键字，找到 Vetur，Validation: Template，取消选中即可。