1

我想在我的 Gridsome 项目中使用 Bootstrap 材料设计库（ https://fezvrasta.github.io/bootstrap-material-design/ ）。

不幸的是 jQuery 和 Popper.js 不起作用（jQuery/Popper.js 未定义）。使用默认的 Bootstrap 4 就像一个魅力。

这是我的 main.js：

import DefaultLayout from '~/layouts/Default.vue'
import "bootstrap-material-design"
import '~/assets/styles/app.scss'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout);
}

此外，导入 Bootstrap 和 jQuery 和 Popper.js 不起作用。

当然我可以直接在我的 html 模板中引用它，但我想将它包含在我的构建过程中......

在我的 app.scss 中也可以使用 scss 文件@import "~bootstrap-material-design/scss/bootstrap-material-design";。

关于如何在我的 main.js 中导入 jquery 和 popper.js 的任何想法？

4

1 回答 1

0

您应该尝试自己导入 Jquery 和 Popper.js。

首先将此行添加到您的 package.json 文件中：

"dependencies": {
    "jquery": "^3.1.1" //or whaterver versions you need
    "popper.js": "^1.15.0",
 },

然后使用以下命令导入这些模块：

npm install

现在您需要在 src/main.js 文件中添加几行：

window.Popper = require('popper.js').default;

此行将加载 popper.js 并使其可用于引导程序执行。然后你可以要求 jquery ：

require('jquery')

我在 Gridsome 中导入 js 资产时仍然遇到一些问题，例如，我尝试使用从互联网下载的主题，但我发现如果您查看主题中的文档，最好的方法可能是制作自己的版本通过使用这种方式导入您需要的模块来收集这些文件

干杯

于 2020-09-26T21:17:38.653 回答