组件已注册但未使用 vue/no-unused-components

Question

创建了我的组件EmployeeTable.vue 然后我导出为

<script>
export default {
  name: "employee-table"
};
</script>

但是当我App.vue按如下方式导入它时，import EmployeeTable from "@/components/EmployeeTable.vue"; 我收到此错误

error  The "EmployeeTable" component has been registered but not used  vue/no-unused-components

Answer 1

这是您的 es-lint 设置。您可以将其更改为不那么严格的规则，也可以解决此实际问题。1. 确保App.vue您在组件部分中注册了它，如下所示：

...
components: {
    EmployeeTable
},
...

2. 确保你在App.vue模板中使用过它：

<EmployeeTable />

Answer 2

使用组件而不是组件

Components: {
    EmployeeTable
},

Answer 3

以正确的方式避免错误

我假设 OP 遇到这种情况的原因与我相同：App 包含 ComponentA，其中包含 ComponentB。但是我们错误地将 ComponentB 包含在 App.vue 中，即使它没有直接在 App.vue 中使用。（一开始我没有意识到导入和组件列表应该位于每个组件中，而不是位于顶层 .vue 文件中。）

在这种情况下避免错误的方法是 ComponentA.vue 具有：

import ComponentB from './ComponentB.vue'

export default {
    name: 'ComponentA',
    components: {
        ComponentB
    },

...

}

注意：App.vue 中不要包含 ComponentB。这里没有直接引用它，这就是 linter 警告您的内容。

关闭警告（最后的手段）

如果您因其他原因遇到此警告，并且确实需要在 linter 中将其关闭，请编辑 package.json。找到 的部分"eslintConfig": {...}并确保它包含"rules": {"vue/no-unused-components": "off"}。

Answer 4

如果你想禁用组件注册状态。使用此代码

<script>
/* eslint-disable vue/no-unused-components */
export default {
  name: "employee-table"
};
</script>

Answer 5

要导入其他资源，如 js 文件或潜在的一些动画文件或任何无法在 HTML/Template 部分添加或调用的内容，您可以在 package.json 中设置 eslint 规则

 "rules": {
    "strict": "off"
  }