我正在尝试将https://github.com/johndatserakis/vue-navigation-bar导入到我的Gridsome项目中，但是收到错误消息：
“未找到模块：错误：空依赖性（无请求。）”
我尝试更改导入组件的方式，但是没有运气。我还尝试过安装纱，以防万一丢失。
<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>
我希望看到一个导航栏。
答案 0 :(得分：0)
在export default导入导航栏之前尝试一下
import VueNavBar from 'vue-navigation-bar'
Vue.component('vue-navigation-bar', VueNavBar)
答案 1 :(得分：0)
我是该组件的开发人员，希望能帮助您正确安装它。
就像@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>
答案 2 :(得分：0)
经过测试且有效的令人讨厌的解决方案（here解释）
components / 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>