Question

链接到我的网站：

https://inspiring-curran-a31177.netlify.com/

它使用的是Vue的静态网站生成器Gridsome。

当您进入移动设备并单击Bootstrap Hamburger菜单时，它将不会打开。

我已按照Gridsome文档中的说明安装了BootstrapVue：https://gridsome.org/docs/assets-css/

控制台中没有Javascript错误。

/src/main.js中的代码：

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client- 
api

// Import nav
import DefaultLayout from '~/layouts/Nav.vue'
// Import footer
import Footer from '~/layouts/Footer.vue'
// Import Bootstrap
import BootstrapVue from 'bootstrap-vue'
// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.min.css'
// Import Bootstrap JS
import 'bootstrap-vue/dist/bootstrap-vue.min.js'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout),
  // Footer
  Vue.component('Footer', Footer)
  // Import bootstrap
  Vue.use(BootstrapVue),
  // Add google fonts
  head.link.push({
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro'
  })
}

Answer 1

您是否在HTML中安装了所有脚本？

<script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

Answer 2

欢迎您！

假设您正在使用Bootstrap npm模块。

npm i -s bootstrap

在Main.js文件中

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

对于汉堡包，请找到codesandbox，其中使用了引导菜单

希望这会有所帮助！

Answer 3

找到了解决方案！

我必须直接从BootstrapVue中使用导航栏作为组件，在这里-https://bootstrap-vue.js.org/docs/components/navbar。直接从主引导站点访问，而不是使用标准的引导导航栏。

如何使Bootstrap的Javascript在Vue（Gridsome）中工作？

3 个答案: