时间戳

首页 > 解决方案 > 错误 'TheNavBar' 已定义但从未使用 no-unused-vars

vue.js - 错误 'TheNavBar' 已定义但从未使用 no-unused-vars

问题描述

我对 Nuxt 很陌生，因为我是服务器端的人，但我正在尝试为我的导航栏制作一个组件，并声称我没有在任何地方使用它。我看到我清楚地在我的布局中使用它。

这只是 ESLint 无缘无故地抱怨，还是与 nuxt 相关的问题，比如没有正确使用组件？

我也尝试将组件重命名为 Navbar，就像组件文件名一样，没有运气会导致同样的问题。

<template>
  <div>
    <TheNavBar />
    <nuxt />
  </div>
</template>

<script>
import TheNavBar from '@/components/Navbar';
export default {};
</script>

<style>
</style>

导航栏.vue

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item" href="https://bulma.io">
            <img
              src="https://bulma.io/images/bulma-logo.png"
              width="112"
              height="28"
            />
          </a>

          <a
            role="button"
            class="navbar-burger burger"
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
      </div>
    </nav>
</template>

<style>
</style>

运行时的错误npm run dev是这样的

 ERROR  Failed to compile with 1 errors                                                                                     friendly-errors 22:59:49


 ERROR  in ./layouts/inside.vue                                                                                             friendly-errors 22:59:49

Module Error (from ./node_modules/eslint-loader/dist/cjs.js):                                                               friendly-errors 22:59:49

/home/ash/code/cascade-pwa/cascade-pwa/layouts/inside.vue
  9:8  error  'TheNavBar' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

                                                                                                                            friendly-errors 22:59:49
 @ ./.nuxt/App.js 13:0-46 16:13-22
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                            friendly-errors 22:59:49

标签： vue.jsnuxt.js

解决方案

所以你的代码中有两个错误。

1.模板中的vue组件是kebap-cases的，这意味着你的<TheNavBar />

应该<the-nav-bar />

  1. 您导入了组件，但没有在脚本中使用它

export default {};

变成

<script>
import TheNavBar from '@/components/Navbar';
export default {
  components: { TheNavBar }
};
</script>

推荐阅读