在网格中使用jQuery和Popper.js

Question

我想在我的Gridsome项目中使用Bootstrap Material Design Library (https://fezvrasta.github.io/bootstrap-material-design/)。

不幸的是，jQuery和Popper.js不能工作(没有定义jQuery/popper.js)。使用默认的Bootstrap 4就像是一个charme。

这是我的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-template中直接引用它，但我希望在我的构建过程中包含它……

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

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

Answer 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资源仍然有一些问题，例如，当我尝试使用从internet下载的主题时，我发现如果您查看主题中的文档，最好的方法可能是通过使用这种方式导入所需的模块来创建这些文件的您自己的版本。

干杯