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

Posted 2023-02-23

【中文标题】组件已注册但未使用 vue/no-unused-components

【英文标题】：component has been registered but not used vue/no-unused-components

【发布时间】：2020-05-06 08:24:31

【问题描述】：

创建了我的组件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

【参考方案1】：

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

...
components: 
    EmployeeTable
,
...

2。确保您在App.vue 模板中使用它：

<EmployeeTable />

【讨论】：

如果此错误不在您的模板中，有没有办法忽略它？我正在尝试动态创建组件，所以我只希望它们在必要时插入到我的 dom 中，而不是任何时候

要更改为 NON-STRICT，请参阅下面其他用户的回答。

@DanielvanDommele 我的回答可能会对您有所帮助。 ***.com/a/65046057/67022

【参考方案2】：

使用组件代替组件

Components: 
    EmployeeTable
,

【参考方案3】：

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

 "rules": 
    "strict": "off"
  

【讨论】：

正确的配置应该是： "vue/no-unused-components": "off"

【参考方案4】：

以正确的方式避免错误

我假设 OP 遇到这种情况的原因与我相同：App 包含 ComponentA，其中包含 ComponentB。但是我们错误地将 ComponentB 包含在 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"。

【参考方案5】：

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

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

【参考方案6】：

组件名称区分大小写字母，比如写在下面...

  import EmployeeTable from './components/EmployeeTable.vue'
  export default 
  name: 'App',
  components: 
  EmployeeTable,
   

而在模板上，我们写的和我们定义的名字类似……

<template>
<div> 
<EmployeeTable />
</div>
</template>

【参考方案7】：

当你导入组件时删除 .vue

例子：

        <template>
      <div id="app">
        <Header />
        <img  src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld';
    import Header from './components/Header/Header';

    export default 
      name: 'App',
      components: 
        HelloWorld,
        Header,
      
    
    </script>

    <style>
    #app 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    
    </style>

【参考方案8】：

您的语法是正确的，但我认为您在这里使用了错误的规则。不应该只是no-unused-vars，没有vue部分。

rules: 
    'no-unused-vars': 'off'
,

【参考方案9】：

我曾经遇到过这个问题，请确保您正确书写组件的名称，不要遗漏或添加任何字母，我希望一切正常

【参考方案10】：

首先我建议您使用phpstorm确保所有相关文件都被导入。

然后其次在 App.vue 中像这样在组件部分注册 EmployeeTable ...

组件： 你好世界

... 3.最重要的是利用

  <div id="app">
    <HelloWorld></HelloWorld>
  </div>
</template>```

in the App.vue