Vue 组件已定义但未使用错误消息.我该如何正确使用它? [英] Vue component defined but not used error message. How do I use it properly?
问题描述
作为 Vue.js 的新手，我已经定义并且据我所知使用了导航组件，但是，npm run serve 不同意.
我得到的确切错误是:
ERROR 编译失败，出现 1 个错误 20:51:39./src/App.vue 中的错误模块错误(来自 ./node_modules/eslint-loader/index.js):错误:导航"组件已在 src/App.vue:13:5 处注册但未使用(vue/no-unused-components):11 |名称:'应用'，12 |成分: {>13 |导航，|^14 |},15 |};16 |发现 1 个错误.@ ./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||__资产||__css||__ 样式.css||__组件||__nav.vue||__App.vue||__main.jsApp.vue
<模板><div id="应用程序"><导航/></模板><脚本>从'@/components/nav.vue'导入导航；导出默认{名称:'应用'，成分: {导航，},};
main.js我相信我所做的唯一更改是添加到 bootstrap.css 文件中.
从'vue'导入Vue；从'./App.vue'导入应用程序；导入 'bootstrap/dist/css/bootstrap.css';导入'./assets/css/style.css';Vue.config.productionTip = false;新的 Vue({渲染:(h) =>h(应用程序)}).$mount('#app');当然还有模板本身.
<模板><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></模板><脚本>导出默认{名称:'导航'，};非常感谢您的帮助.请善待您的回复，并在评论中包含任何反对意见，否则不会很有帮助.
您不应该将其称为导航，因为已经有一个具有此名称的默认 HTML 组件(因为您正在实际组件中使用自己).
将您的组件重命名为 Nav(是的大写 N)，之后它应该可以正常工作.
导航.vue
<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></模板>导出默认{name: '导航',};App.vue
<div id="应用程序"><导航/></模板><脚本>从'@/components/Nav'导入导航；导出默认{名称:'应用'，成分: {导航，},};
As a newbie to Vue.js I have defined and, as far as I'm aware, used a nav component, however, npm run serve disagrees.
The exact error I get is:
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
File layout
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
The only change I believe I've made is adding in the bootstrap.css file.
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');
And, of course, the template itself.
<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>
Many thanks for your help. Please be kind with your replies and include a comment with any downvote otherwise it isn't very helpful.
You shouldn't call it nav since there's already a default HTML component with this name (as you're using yourself in the actual component).
Rename your component to Nav (Yes a capital N), and it should work just fine after this.
Nav.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>
这篇关于Vue 组件已定义但未使用错误消息.我该如何正确使用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
