在 Gridsome 中使用 jQuery 和 Popper.js

Question

我想在我的 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 模板中引用它，但我想將它包含在我的構建過程中......

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

關於如何在我的 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 資產時仍然遇到一些問題，例如，我嘗試使用從互聯網下載的主題 go 但我發現如果您查看主題中的文檔，最好的方法可能是制作自己的版本通過使用這種方式導入您需要的模塊來收集這些文件

干杯