Как подключать сторонние библиотеки (например jquery, form-serializer и т.д.) в vue.js?

Пользователь

от charles.orn , в категории: JavaScript , год назад

Как подключать сторонние библиотеки (например jquery, form-serializer и т.д.) в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от amber_moore , год назад

@charles.orn 

В Vue.js можно подключать сторонние библиотеки как обычно, используя теги <script> внутри шаблона. Однако, для того чтобы взаимодействовать со сторонней библиотекой из компонента Vue, необходимо выполнить несколько дополнительных шагов.

  1. Установка библиотеки


Перед подключением сторонней библиотеки необходимо установить ее с помощью менеджера пакетов, например, npm или yarn. Например, для установки jQuery, необходимо выполнить команду:

1
npm install jquery --save


  1. Импорт библиотеки в компонент


Чтобы использовать библиотеку в компоненте, ее необходимо импортировать в скрипт компонента. Например, для импорта jQuery необходимо добавить следующую строку в скрипт компонента:

1
import $ from 'jquery'


  1. Использование библиотеки в методах компонента


После импорта библиотеки ее можно использовать в методах компонента. Например, чтобы использовать jQuery для изменения DOM-элементов, необходимо добавить следующий код в метод компонента:

1
2
3
$(document).ready(function () {
  // Код, который использует jQuery
})


  1. Использование библиотеки в шаблоне компонента


Чтобы использовать библиотеку в шаблоне компонента, ее необходимо добавить в объект Vue в свойство mounted. Например, чтобы использовать jQuery для обработки событий клика, необходимо добавить следующий код в объект Vue:

1
2
3
4
5
mounted: function () {
  $(document).on('click', '.my-class', function () {
    // Код, который использует jQuery
  })
}


Также можно использовать Vue-плагины для интеграции сторонних библиотек с Vue.js. Например, для интеграции jQuery с Vue.js можно использовать плагин Vue-jQuery:

1
npm install vue-jquery --save


После установки плагина его можно использовать в компоненте следующим образом:

1
2
3
4
5
6
7
8
import Vue from 'vue'
import VueJquery from 'vue-jquery'

Vue.use(VueJquery)

export default {
  // Компонент
}


После этого можно использовать jQuery в шаблоне компонента с помощью директивы v-jquery:

1
2
3
<div v-jquery>
  <!-- Код, который использует jQuery -->
</div>