Comment utiliser un plugin jQuery dans Vue ?

Question

Je suis en train de construire une application web dans VueJS mais je rencontre un problème. Je veux utiliser une extension jQuery (cropit pour être spécifique) mais je ne sais pas comment l'instancier/exiger/importer de la bonne manière sans obtenir des erreurs.

J'utilise l'outil CLI officiel et le modèle webpack pour mon application.

J'ai inclus jQuery comme ceci dans mon fichier main.js :

import jQuery from 'jQuery'
window.jQuery = jQuery

Je suis en train de construire un composant d'édition d'image où je veux instancier le crept comme ceci :

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

Mais je continue à obtenir des erreurs... Maintenant ma question est de savoir comment instancier correctement jQuery et les plugins via NPM/Webpack/Vue ?

Merci d'avance !

Answer 1

Option 1 : Utiliser ProvidePlugin

Ajouter le ProvidePlugin au tableau des plugins dans les deux build/webpack.dev.conf.js y build/webpack.prod.conf.js afin que jQuery devienne globalement disponible pour tous vos modules :

plugins: [

  // ...

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

Option #2 : Utiliser le module Expose Loader pour webpack

Comme le suggère @TremendusApps dans sa réponse, ajoutez l'élément Exposer le chargeur paquet :

npm install expose-loader --save-dev

Utiliser dans votre point d'entrée main.js así:

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

// ...

Answer 2

Installez d'abord jquery en utilisant npm,

npm install jquery --save

Ajouter app.js avant require('/[path_to]/main.js') ;

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

Answer 3

Supposons que vous ayez un projet Vue créé avec vue-cli (par exemple : vue init webpack mon-projet). Allez dans le répertoire du projet et exécutez

npm install jquery --save

Ouvrir le dossier build/webpack.base.conf.js et ajouter plugins :

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

Ajoutez également en haut du fichier :

const webpack = require('webpack')

Si vous utilisez ESLint, ouvrez .eslintrc.js et ajouter les globaux suivants : {

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

Maintenant vous êtes prêt à partir. Utilisez $ partout dans votre js.

NOTE Vous n'avez pas besoin d'inclure un chargeur d'exposition ou tout autre élément pour l'utiliser.

Originaire de https://maketips.net/tip/223/how-to-include-jquery-into-vuejs

Answer 4

Vous devez utiliser soit le globals chargeur ou expose pour s'assurer que webpack inclut la librairie jQuery dans votre code source et pour qu'il n'y ait pas d'erreurs lorsque vous utilisez $ dans vos composants.

// 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')

Si vous préférez, vous pouvez l'importer (require) directement dans votre configuration webpack comme point d'entrée, si je comprends bien, mais je n'ai pas d'exemple sous la main

Alternativement, vous pouvez utiliser le chargeur de globales comme ceci : https://www.npmjs.com/package/globals-loader

Answer 5

Je l'utilise comme ça :

import jQuery from 'jQuery'

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