Как подключить глобально плагин jquery на vue.js?

Question

[Человек]

Здравствуйте.
Как правильно подключить плагин OnePageScroll (www.thepetedesign.com/demos/onepage_scroll_demo.html ) на vue.js?
Пример как подлючать такие плагины на vue.js через npm у меня есть, но я не знаю как подключить просто плагин, не через npm.
Нужно именно правильно, а не просто добавить .css и .js в index.html

Comments

[Человек]

Наше статью, но не могу понять до конца что как и куда
https://laracasts.com/discuss/channels/vue/cant-us...

Наверное тут дело больше не в самом vue, а в webpack?

[Dark Hole]

Человек: а вы можете объяснить, при чем тут Vue, если плагин для jQuery?

[Человек]

Dark Hole: сайт написан на vue.js

[Dark Hole]

Человек: jQuery без разнцы, на чем он написан. Он работает с DOM. Vue на другом уровне. То есть вам нужно в WebPack подключать, а не в Vue.

[Человек]

Dark Hole: наверное да, я сам пока не понимаю в этом. Сайт не я начинал делать, но я исправлял стили. А теперь нужно подключать плагины, а я пока практически ничего в этом не смыслю, так как технология новая (webpack и vue).

И если посмотреть документацию по плагину, то там есть код
$(".main").onepage_scroll();
где нужно подключать это?
как правильно объявить, что нужно еще использовать jquery и чтобы она еще раньше запускалась, чем этот скрипт и так далее..

Вопросов у меня пока много, но четких ответов очень мало. Все как-то расплывчато, но я упорно разбираюсь.

[Dark Hole]

Человек: документацию по Vue вам в руки. По большей части, Vue рендерит DOM. А jQuery, как я уже сказал, работает с DOM уже после Vue. То есть вам нужно сгенерировать с помощью Vue разметку, а потом уже к сгенерированому DOM'у применять этот плагин.
Если посмотреть документацию по плагину, то можно заметить, что сделана она явно для тупых. Вам нужно выбрать с помощью jQuery нужный элемент и из него вызвать функцию onepage_scroll.
На вашем месте, я, повторю, взялся бы за изучение jQuery, Vue и WebPack. Будь у вас хотя бы начальные знания по указаным вещам, или, хотя бы, по jQuery, вопроса, скорее всего, не было.

[Человек]

Dark Hole: спасибо

Answer 1

[askhat]

Если не через NPM, то через CDN. Открывайте свой index.html и добавляйте ссылки.

Но скорее всего вас интересует как заставить это работать. Тут два варианта:

1. Через хук:

export default {
  // mounted неплохой вариант, если document должен быть ready
  mounted () {
    const $ = window.$
    $('.main').onepage_scroll()
  }
}

2. Или через кастомную директиву:

export default {
  directives: {
    // Произвольное имя директивы
    onePageScroll: {
      // На этом хуке компонент со всеми дочерними компонентами готов
      componentUpdated (el) {
        const $ = window.$
        // Елемент не нужно «селектить» по классу/ИД т.к. он передан в аргументы директивы
        $(el).onepage_scroll()
      }
    }
  }
}

<div>
  <section v-one-page-scroll />
</div>

Не уверен, что именно приведённые хуки буду работать хорошо/вообще—попробуйте разные варианты.

Answer 2

[Evgeny Kulakov]

Если используется webpack, то используйте providePlugin для подключения jquery.