“组件”未定义（no-undef）答案

【问题标题】：'components' is not defined (no-undef)“组件”未定义（no-undef）
【发布时间】：2021-04-26 18:58:39
【问题描述】：

刚刚将 vue 添加到现有项目中，我收到了一个奇怪的 linting 错误：

error: 'components' is not defined (no-undef) at src/App.vue:13:3:
  11 | 
  12 | @Component({
> 13 |   components: { HelloWorld },
     |   ^
  14 | })
  15 | export default class App extends Vue {}
  16 | </script>

我添加对象的每个其他属性也会发生这种情况。

Eslint 配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "@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",
    "@typescript-eslint/explicit-member-accessibility": ["error"],
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        mocha: true,
      },
    },
  ],
};

包.json

    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",

打字稿

如果有任何问题，我正在使用打字稿。

【问题讨论】：

错误来自 TS，所以是的，在这种情况下它很重要，因为您需要进行一些最低限度的配置才能使其正常工作。不确定您已经做了什么，但您可以在@Component 行上方尝试import * as Vue from "vue";，看看它是否能解决问题。
这个也可能有帮助：vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components
就我而言，问题来自 eslint:recommended 包。如果我从扩展数组中删除它，错误就会消失。除此之外，这是默认的 vue 启动的东西，我没有改变任何东西。 @kissu
添加导入并不能解决问题@kissu
我还可以通过使用 Vue CLI 5.0.0-alpha 生成的项目重现这一点，该项目将 ESLint 提升到 7。已知的工作版本是 "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2"，从 Vue CLI 4.5.10 脚手架可以看出。

标签： typescript vue.js eslint

【解决方案1】：

typescript-eslint repo 上存在一个问题。

https://github.com/typescript-eslint/typescript-eslint/issues/2942

用yarn upgrade升级后，问题就消失了

【讨论】：

【解决方案2】：

我认为这是 TypeScript 的 no-undef 中的一个错误。我找不到任何有关它的信息，但这为我解决了这个问题。它认为“组件”是一个变量而不是属性名称。改用“组件”：

@Component({
    "components": { HelloWorld },
})
export default class App extends Vue {}

【讨论】：