在 Gridsome 中使用 jQuery 和 Popper.js答案

【问题标题】：Use jQuery and Popper.js in Gridsome在 Gridsome 中使用 jQuery 和 Popper.js
【发布时间】：2020-07-16 15:30:30
【问题描述】：

我想在我的 Gridsome 项目中使用 Bootstrap Material Design Library (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 模板中直接引用它，但我想将它包含在我的构建过程中......

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

关于如何在我的 main.js 中导入 jquery 和 popper.js 有什么想法吗？

【问题讨论】：

控制台是否出现任何错误？还是在构建时？
@ShayaUlman 是的。它说没有找到 jQuery 或 Popper.js
您的问题是关于 Gridsome 的吗？如何将 Popper.js / jQuery 与“Vue”一起使用不是问题吗？
@ShayaUlman 这是可能的.. ^^

标签： jquery npm bootstrap-4 gridsome

【解决方案1】：

您应该尝试自己导入 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 资产时仍然遇到一些问题，例如，我尝试使用从互联网下载的主题，但我发现如果您查看主题中的文档，最好的方法可能是制作通过使用这种方式导入您需要的模块，您自己的文件版本

干杯

【讨论】：