在 Gridsome 中导入 Vue-Navigation-Bar答案

【问题标题】：Import Vue-Navigation-Bar in Gridsome在 Gridsome 中导入 Vue-Navigation-Bar
【发布时间】：2019-11-25 10:10:40
【问题描述】：

我正在尝试将 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>

我希望看到一个导航栏。

【问题讨论】：

标签： vue.js gridsome

【解决方案1】：

在export default导入导航栏之前试试

import VueNavBar from 'vue-navigation-bar'
Vue.component('vue-navigation-bar', VueNavBar)

【讨论】：

这是我尝试过的替代方法，我得到了同样的错误。不知道为什么老实说它不起作用。
您可以在在线编译器平台上共享您的代码或项目设置吗？

【解决方案2】：

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

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

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

另外 - 你实际上有一个更大的问题，因为 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>

【讨论】：

【解决方案3】：

经过测试和工作的gridsome解决方案（解释为here）

组件/NavigationBar.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>

【讨论】：