Используйте jQuery и Popper.js в Gridsome

Я хочу использовать библиотеку дизайна материалов Bootstrap (https://fezvrasta.github.io/bootstrap-material-design/) в моем проекте Gridsome.

К сожалению, 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.

Есть идеи, как импортировать jquery и popper.js в мой main.js?


npm jquery bootstrap-4 gridsome
person Brotzka    schedule 04.04.2020    source источник
comment
У вас есть ошибка в консоли? или во время сборки?   -  person Shaya Ulman    schedule 12.04.2020
comment
@ShayaUlman да. В нем говорится, что jQuery или Popper.js не найдены   -  person Brotzka    schedule 13.04.2020
comment
Ваш вопрос о Gridsome? Разве это не вопрос, как использовать Popper.js / jQuery с Vue?   -  person Shaya Ulman    schedule 13.04.2020
comment
@ShayaUlman, это возможно .. ^^   -  person Brotzka    schedule 13.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вам следует попробовать импортировать 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')

У меня все еще есть некоторые проблемы с импортом js-ресурсов в Gridsome, когда, например, я пытаюсь использовать тему, которую я загрузил из Интернета, но обнаружил, что если вы посмотрите документы в теме, вероятно, лучший способ - создать свою собственную версию этих файлов, импортировав модули, которые вам нужны, используя этот способ

ваше здоровье

person Fabrizio Anichini    schedule 26.09.2020