Vue 组件已定义但未使用的错误消息。我该如何正确使用它？答案

【问题标题】：Vue component defined but not used error message. How do I use it properly?Vue 组件已定义但未使用的错误消息。我该如何正确使用它？
【发布时间】：2020-04-10 10:02:04
【问题描述】：

作为 Vue.js 的新手，我已经定义并且据我所知使用了导航组件，但是，npm run serve 不同意。

我得到的确切错误是：

 ERROR  Failed to compile with 1 errors                                                                                                                                                             20:51:39

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: The "nav" component has been registered but not used (vue/no-unused-components) at src/App.vue:13:5:
  11 |   name: 'app',
  12 |   components: {
> 13 |     nav,
     |     ^
  14 |   },
  15 | };
  16 | </script>

1 error found.

 @ ./src/main.js 6:0-28 12:13-16
 @ multi (webpack)-dev-server/client?http://192.168.233.240:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

文件布局

src
|
|__assets
|  |__css
|     |__ style.css
|
|__components
|  |__nav.vue
|
|__App.vue
|
|__main.js

App.vue

    <template>
  <div id="app">
    <nav />
  </div>
</template>

<script>
import nav from '@/components/nav.vue';

export default {
  name: 'app',
  components: {
    nav,
  },
};
</script>

main.js 我相信我所做的唯一更改是添加bootstrap.css 文件。

import Vue from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.css';

import './assets/css/style.css';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount('#app');

当然还有模板本身。

    <template>
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </nav>
</template>

<script>

export default {
  name: 'nav',
};
</script>

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

您收到此错误是因为您无法使用现有的 html 标记命名组件。 Nav 是 html 中的保留关键字。将你的组件重命名为 nav 以外的其他名称，例如 app-nav-bar，见下文。

<template>
  <div id="app">
    <app-nav-bar />
  </div>
</template>

<script>
import navBar from './components/nav.vue';
export default {
  name: 'app',
  components: {
    'app-nav-bar': navBar
  }
}
</script>

【讨论】：

【解决方案2】：

您不应该将其称为 nav，因为已经有一个具有此名称的默认 HTML 组件（因为您在实际组件中使用自己）。
将您的组件重命名为 Nav（是的，大写 N），之后它应该可以正常工作了。

导航.vue

<template>
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </nav>
</template>

export default {
  name: 'Nav',
};

App.vue

<template>
  <div id="app">
    <Nav />
  </div>
</template>

<script>
import Nav from '@/components/Nav';

export default {
  name: 'app',
  components: {
    Nav,
  },
};
</script>

【讨论】：