Как использовать плагин jQuery внутри Vue

Я создаю веб-приложение внутри VueJS, но у меня возникла проблема. Я хочу использовать расширение jQuery (для конкретного урока), но я не знаю, как создавать/требовать/импортировать его правильно, не получая ошибок.

Я использую официальный инструмент CLI и шаблон webpack для своего приложения.

Я включил jQuery, как это, в файл main.js:

import jQuery from 'jQuery'
window.jQuery = jQuery

Теперь я создаю компонент редактора изображений, где я хочу создать экземпляр, например:

export default {
  ready () {
    $(document).ready(function ($) {
      $('#image-cropper-wrapper-element').cropit({ /* options */ })
    })
  },
 }

Но я продолжаю получать ошибки... Теперь мой вопрос заключается в том, как правильно создавать jQuery и плагины через NPM/Webpack/Vue?

Спасибо заранее!

Ответы

Ответ 1

Вариант № 1: Используйте ProvidePlugin

Добавьте ProvidePlugin в массив плагинов как в build/webpack.dev.conf.js и в build/webpack.prod.conf.js чтобы jQuery стал глобально доступным для всех ваших модулей:

plugins: [

  // ...

  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

Вариант № 2. Использование модуля Expose Loader для веб-пакета

Как @TremendusApps предлагает в своем ответе, добавьте пакет Expose Loader:

npm install expose-loader --save-dev

Используйте в своей точке входа main.js вот так:

import 'expose?$!expose?jQuery!jquery'

// ...

Ответ 2

Вы должны использовать либо globals погрузчик или expose погрузчик, чтобы гарантировать, что WebPack включает LIB JQuery в вашем выводе исходного кода и так, что он не бросает ошибки, когда ваше использование $ в ваших компонентах.

// example with expose loader:
npm i --save-dev expose-loader

// somewhere, import (require) this jquery, but pipe it through the expose loader
require('expose?$!expose?jQuery!jquery')

Если вы предпочитаете, вы можете импортировать (требовать) его непосредственно в конфигурацию вашего веб-пакета как точку входа, так что я понимаю, но у меня нет примера этого под рукой

Кроме того, вы можете использовать загрузчик globals следующим образом: https://www.npmjs.com/package/globals-loader

Ответ 3

Предположим, у вас есть проект Vue, созданный с помощью vue-cli (например, vue init webpack my-project). Перейти к проекту DIR и запустить

npm install jquery --save

Откройте файл build/webpack.base.conf.js и добавьте plugins:

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

Также в начале файла добавьте:

const webpack = require('webpack')

Если вы используете ESLint, откройте .eslintrc.js и добавьте следующие глобальные переменные: {

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...

Теперь вы готовы к работе. Используйте $ где угодно в вашем JS.

ПРИМЕЧАНИЕ. Чтобы использовать это, вам не нужно включать expose loader или любой другой материал.

Первоначально из https://maketips.net/tip/223/how-to-include-jquery-into-vuejs

Ответ 4

Я использую его следующим образом:

import jQuery from 'jQuery'

ready: function() {
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },

Ответ 5

Сначала установите jquery, используя npm,

npm install jquery --save

Я использую:

global.jQuery = require('jquery');
var $ = global.jQuery;
widows.$ = $;