最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Vue component defined but not used error message. How do I use it properly? - Stack Overflow

programmeradmin3浏览0评论

As a newbie to Vue.js I have defined and, as far as I'm aware, used a nav ponent, however, npm run serve disagrees.

The exact error I get is:

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

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: The "nav" ponent has been registered but not used (vue/no-unused-ponents) at src/App.vue:13:5:
  11 |   name: 'app',
  12 |   ponents: {
> 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
|
|__ponents
|  |__nav.vue
|
|__App.vue
|
|__main.js

App.vue

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

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

export default {
  name: 'app',
  ponents: {
    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>

As a newbie to Vue.js I have defined and, as far as I'm aware, used a nav ponent, however, npm run serve disagrees.

The exact error I get is:

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

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: The "nav" ponent has been registered but not used (vue/no-unused-ponents) at src/App.vue:13:5:
  11 |   name: 'app',
  12 |   ponents: {
> 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
|
|__ponents
|  |__nav.vue
|
|__App.vue
|
|__main.js

App.vue

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

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

export default {
  name: 'app',
  ponents: {
    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>
Share Improve this question edited Dec 7, 2021 at 9:49 E_net4 30.1k13 gold badges112 silver badges151 bronze badges asked Dec 17, 2019 at 21:05 SarahJessicaSarahJessica 5241 gold badge8 silver badges21 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

You shouldn't call it nav since there's already a default HTML ponent with this name (as you're using yourself in the actual ponent).
Rename your ponent 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 '@/ponents/Nav';

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

You are getting this error because you cannot name a ponent with an existing html tag. Nav is a reserved keyword in html. Rename your ponent differently other than nav to something like app-nav-bar, see below.

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

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

发布评论

评论列表(0)

  1. 暂无评论