javascript - 如何让 Bootstrap 的 Javascript 在 Vue (Gridsome) 中工作?
问题描述
链接到我的网站:
https://inspiring-curran-a31177.netlify.com/
它使用 Gridsome,Vue 的静态站点生成器。
当您转到移动设备并单击 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'
})
}
解决方案
欢迎来到 SO!
假设您正在使用Bootstrap
npm 模块。
npm i -s bootstrap
在您的 Main.js 文件中
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
对于汉堡包,请找到使用引导菜单的代码框
希望这可以帮助!
推荐阅读
- odoo-10 - 如何在 Odoo 10 的调试模式下启用“技术翻译”?
- angular - Input() Bind 上的 Angular 5 调用函数
- jquery - Internet Explorer 上的 SVG 饼图中断
- objective-c - 如何通过objective-c从firebase存储加载图像并循环到每个按钮
- python - Selenium 重用浏览器会话
- python - 在不调用 __init__ 的情况下初始化 PyObject
- rxjs - 内部 observable 发出值后返回源 observable 值
- c# - UDP Socket 从一个 IP 地址接收数据包,而忽略其他 IP 地址
- r - 没有重叠的水平 geom_bar、相等的条宽和自定义的轴刻度标签
- javascript - jQuery - 将列表排序为带有标题的组,然后按字母顺序