javascript - Vue 组件已定义但未使用的错误消息。我该如何正确使用它?
问题描述
作为 Vue.js 的新手,我已经定义并且据我所知,使用了 nav 组件,但是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
应用程序.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>
解决方案
您不应该将其称为 nav,因为已经有一个具有此名称的默认 HTML 组件(因为您在实际组件中使用自己)。
将您的组件重命名为 Nav(是的,大写 N),之后它应该可以正常工作。
导航
<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',
};
应用程序.vue
<template>
<div id="app">
<Nav />
</div>
</template>
<script>
import Nav from '@/components/Nav';
export default {
name: 'app',
components: {
Nav,
},
};
</script>
推荐阅读
- angular - 没有 SyncFusion 角度调度器的样式
- javascript - Javascript:: 更改单选按钮上的 addEventListener 无法使用 requirejs
- python - 如何在不获取 W504 的情况下修复“二元运算符之前的 W503 换行符”?
- javascript - 在 React 中使用多行 javascript
- python - 如何在 Django 中获取 python 文件数据?
- swiftui - SwiftUI:不同视图之间的数据共享
- heroku - 我构建了heroku应用程序并且我构建成功但是Dynos无法显示我的代码当然我等待了很多
- node.js - 如何在 Firebase Cloud 中托管具有 PeerJS 依赖项的 NodeJS 应用程序?
- java - Jacoco 显示行没有被覆盖,即使 IntelliJIdea 静态代码分析器说它们被覆盖
- javascript - 如何使用 Pug 作为模板引擎更好地管理 ExpressJs 中的 FrontEnd JavaScript 文件?