0

我正在尝试将https://github.com/johndatserakis/vue-navigation-bar导入到我的 Gridsome 项目中，但收到错误消息：

“未找到模块：错误：空依赖项（无请求。）”

我试过改变我导入组件的方式，但没有运气。我也试过 yarn install 以防有什么遗漏。

<template>
    <vue-navigation-bar :options="navbarOptions" />
</template>

<script>
export default {
  name: 'VueNavBar',
  components: {
    VueNavBar: () => import('vue-navigation-bar'),
    data () {
    return {
      navbarOptions: {
        elementId: 'main-navbar',
        isUsingVueRouter: true,
        mobileBreakpoint: 992,
        brandImagePath: './',
        brandImage: require(''),
        brandImageAltText: 'brand-image',
        collapseButtonImageOpen: require(''),
        collapseButtonImageClose: require(''),
        showBrandImageInMobilePopup: false,
        ariaLabelMainNav: 'Main Navigation',
        menuOptionsLeft: [
            {
                type: 'link',
                text: 'Why Dunder Mifflin',
                iconLeft: '',
                subMenuOptions: [
                    {
                        type: 'link',
                        text: 'About',
                        subText: 'Stupid corporate wet blankets. Like booze ever killed anyone.',
                        path: './about',
                        iconLeft: '<svg id="i-info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M16 14 L16 23 M16 8 L16 10" /> <circle cx="16" cy="16" r="14" /> </svg>',
                    },
                    {
                        type: 'hr',
                    },
                    {
                        type: 'link',
                        text: 'Locations',
                        subText: 'You\'re a presentation tool!',
                        path: './locations',
                    },
                    {
                        type: 'hr',
                    },
                    {
                        type: 'link',
                        text: 'Blog',
                        subText: 'I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.',
                        path: './blog',
                    },
                ]
            },
            {
                type: 'link',
                text: 'Contact',
                subMenuOptions: [
                    {
                        type: 'link',
                        text: 'Customer Service',
                        path: './customer-service'
                    },
                    {
                        type: 'link',
                        text: 'Accounting',
                        path: './accounting',
                    },
                    {
                        type: 'hr',
                    },
                    {
                        type: 'link',
                        text: 'Reception',
                        path: './reception',
                        iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
                    },
                ]
            },
            {
                type: 'link',
                text: 'Pricing',
                path: './pricing',
                iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
            },
        ],
        menuOptionsRight: [
            {
                type: 'button',
                text: 'Signup',
                path: './signup',
                class: 'button-red',
                iconLeft: '<svg id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="currentcolor" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" /> </svg>'
            },
            {
                type: 'button',
                text: 'Login',
                path: './login',
                iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
            }
        ]
      }
    }
  }
}}
</script>

我希望看到一个导航栏。

4

3 回答 3

1

export default导入导航栏前先试用

import VueNavBar from 'vue-navigation-bar'
Vue.component('vue-navigation-bar', VueNavBar)
于 2019-07-16T18:24:33.763 回答
1

我是该组件的开发人员，我想帮助您正确安装它。

就像@Sabee 所说，您需要在对象开始之前导入组件export default {}。

实际上，我从未见过有人使用您在示例中使用的导入方法，我建议您不要这样做，因为我怀疑它是否适用于任何组件。

另外 - 您实际上有一个更大的问题，因为该components对象没有正确设置，并且实际上保存了您的整个组件代码。这不会与任何库一起编译，甚至没有库。这似乎更像是格式错误。

所以现在让我们努力让导航栏显示出来。请注意，我在这里向您展示的方式是全局安装导航栏，因此在这种情况下您甚至不需要components在组件上使用该属性。（一旦我们越过了这个最初的障碍，我们就会担心这不是全球性的。）

此外，我还导入了组件的 css，就在组件导入的下方。这将使导航栏在您的应用中看起来不错。

因此，您需要的完整示例如下：

<template>
  <vue-navigation-bar :options="navbarOptions" />
</template>

<script>
  import VueNavigationBar from "vue-navigation-bar";
  Vue.component("vue-navigation-bar", VueNavigationBar);
  import 'vue-navigation-bar/dist/vue-navigation-bar.css'

  export default {
    data() {
      return {
        navbarOptions: {
          elementId: 'main-navbar',
          isUsingVueRouter: true,
          mobileBreakpoint: 992,
          brandImagePath: './',
          brandImage: null,
          brandImageAltText: 'brand-image',
          collapseButtonImageOpen: null,
          collapseButtonImageClose: null,
          showBrandImageInMobilePopup: true,
          ariaLabelMainNav: 'Main Navigation',
          tooltipAnimationType: 'shift-away',
          menuOptionsLeft: [{
              type: 'link',
              text: 'Why Dunder Mifflin',
              subMenuOptions: [
                {
                  isLinkAction: true,
                  type: "link",
                  text: "About",
                  subText:
                    "Stupid corporate wet blankets. Like booze ever killed anyone.",
                  path: "./about",
                  iconLeft: '<i class="fa fa-star fa-fw"></i>'
                },
                {
                  type: 'hr',
                },
                {
                  type: 'link',
                  text: 'Locations',
                  subText: 'You\'re a presentation tool!',
                  path: './locations',
                },
                {
                  type: 'hr',
                },
                {
                  type: 'link',
                  text: 'Blog',
                  subText: 'I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.',
                  path: './blog',
                },
              ]
            },
            {
              type: 'link',
              text: 'Contact',
              subMenuOptions: [{
                  type: 'link',
                  text: 'Customer Service',
                  path: './customer-service'
                },
                {
                  type: 'link',
                  text: 'Accounting',
                  path: './accounting',
                },
                {
                  type: 'hr',
                },
                {
                  type: 'link',
                  text: 'Reception',
                  path: './reception',
                  iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
                },
              ]
            },
            {
              type: 'link',
              text: 'Pricing',
              path: './pricing',
              iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
            },
          ],
          menuOptionsRight: [{
              type: 'button',
              text: 'Signup',
              path: './signup',
              class: 'button-red'
            },
            {
              type: 'button',
              text: 'Login',
              path: './login',
              iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
            }
          ]
        }
      }
    }
  }
</script>
于 2019-09-04T15:34:56.520 回答
0

经过测试和工作的网格解决方案（在此处解释）

组件/导航栏.vue：

<template>
  <ClientOnly>
    <!-- We need ClientOnly tag because vue-navigation-bar doesn't support SSR -->
    <vue-navigation-bar :options="navbarOptions" />
  </ClientOnly>
</template>

<script>
  import VueNavigationBar from "vue-navigation-bar";
  //Vue.component("vue-navigation-bar", VueNavigationBar);
  //We don't need to create vue component here

  import 'vue-navigation-bar/dist/vue-navigation-bar.css'

  export default {
    data() {
      return {
        navbarOptions: {
          elementId: 'main-navbar',
          isUsingVueRouter: true,
          mobileBreakpoint: 992,
          brandImagePath: './',
          brandImage: null,
          brandImageAltText: 'brand-image',
          collapseButtonImageOpen: null,
          collapseButtonImageClose: null,
          showBrandImageInMobilePopup: true,
          ariaLabelMainNav: 'Main Navigation',
          tooltipAnimationType: 'shift-away',
          menuOptionsLeft: [{
              type: 'link',
              text: 'Why Dunder Mifflin',
              subMenuOptions: [
                {
                  isLinkAction: true,
                  type: "link",
                  text: "About",
                  subText:
                    "Stupid corporate wet blankets. Like booze ever killed anyone.",
                  path: "./about",
                  iconLeft: '<i class="fa fa-star fa-fw"></i>'
                },
                {
                  type: 'hr',
                },
                {
                  type: 'link',
                  text: 'Locations',
                  subText: 'You\'re a presentation tool!',
                  path: './locations',
                },
                {
                  type: 'hr',
                },
                {
                  type: 'link',
                  text: 'Blog',
                  subText: 'I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.',
                  path: './blog',
                },
              ]
            },
            {
              type: 'link',
              text: 'Contact',
              subMenuOptions: [{
                  type: 'link',
                  text: 'Customer Service',
                  path: './customer-service'
                },
                {
                  type: 'link',
                  text: 'Accounting',
                  path: './accounting',
                },
                {
                  type: 'hr',
                },
                {
                  type: 'link',
                  text: 'Reception',
                  path: './reception',
                  iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
                },
              ]
            },
            {
              type: 'link',
              text: 'Pricing',
              path: './pricing',
              iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
            },
          ],
          menuOptionsRight: [{
              type: 'button',
              text: 'Signup',
              path: './signup',
              class: 'button-red'
            },
            {
              type: 'button',
              text: 'Login',
              path: './login',
              iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
            }
          ]
        }
      }
    },
    components:{
      VueNavigationBar
    }
  }
</script>

您需要在您正在使用的文件中导入和导出<NavigationBar />此组件（即Default.vue或Header.vue）：

<template>
     <NavigationBar />
        <!--- another code -->
    </header>
</template>

<script>
import NavigationBar from "@/components/NavigationBar.vue";

export default {  
  components: {
    NavigationBar
  }
}
</script>
于 2020-02-11T03:39:36.263 回答