Vue 3 模板根只需要一个 element.eslint-plugin-vue

Question

在搭建一个 Vue 3 项目后，我注意到我的 App.vue 中有一个错误。

A functional component that renders the matched component for the given path. Components rendered in can also contain its own , which will render components for nested paths.

API Reference

[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue

我试过放

    "vue/no-multiple-template-root": 0

在我的 .eslintrc.js

但错误仍然存​​在。我怎样才能摆脱错误？因为在 Vue 3 中，模板中不必只有一个元素。

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        "vue/no-multiple-template-root": 0
    }
};

Answer 1

这个错误发生在我身上，因为我没有在 VS Code 中打开项目根目录，而是打开父文件夹，因此 Vetur 在其中查找package.json.

Answer 2

我最终关闭了 Vetur linting。Vetur 认为它是一个 Vue 2 项目，因为它位于 VS Code 工作区中。

https://github.com/vuejs/vetur/issues/2299#issuecomment-696015374

你可以通过这样做来解决这个问题

F1>Preferences:Open Settings (JSON)

粘贴

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

Answer 3

禁用 Vetur 并使用Volar代替。现在它是 Vue 3 项目的官方推荐。

来自官方迁移指南：

建议使用 VSCode 和我们的官方扩展 Volar (opens new window)，它为 Vue 3 提供全面的 IDE 支持。

Answer 4

这里使用了这个：

在 .eslintrc.js 中

代替：

rules: { "vue/no-multiple-template-root": 0 }

尝试：

rules: {"vue/no-multiple-template-root": "off" }

Answer 5

在vue create projectVue3 上，将其添加到您的package.json文件中：

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "vue/no-multiple-template-root": "off"
    }
  }

添加“规则”可以消除问题中描述的错误。无需更改默认 vetur 设置。

Answer 6

如果您正在处理 monorepo，因此 package.json 不在工作区根目录下，那么 Vetur 默认情况下将无法找到 package.json，因此无法确定 vue 版本。

在这种情况下，我们需要告诉 Vetur package.json 位置

https://vuejs.github.io/vetur/guide/setup.html#advanced