web-dev-qa-db-fra.com

Comment utiliser un plugin jQuery dans Vue

Je construis 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 instancier/exiger/importer de la bonne manière sans obtenir d'erreur.

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

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

import jQuery from 'jQuery'
window.jQuery = jQuery

Maintenant, je construis un composant éditeur d'image où je veux instancier comme suit: 

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

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

Merci d'avance!

jqueryjquery-pluginswebpackvue.js
31
Luuk Van Dongen

Option n ° 1: utiliser ProvidePlugin

Ajoutez le ProvidePlugin au tableau de plugins dans build/webpack.dev.conf.js et 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 n ° 2: utiliser le module Expose Loader pour webpack

Comme @TremendusApps le suggère dans sa réponse, ajoutez le paquet Expose Loader :

npm install expose-loader --save-dev

Utilisez dans votre point d’entrée main.js comme ceci:

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

// ...
51
prograhammer

Vous devez utiliser le chargeur globals ou le chargeur expose pour vous assurer que Webpack inclut la bibliothèque jQuery dans votre sortie de code source et qu'elle ne génère 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 (l'exiger) directement dans votre configuration Webpack en tant que point d'entrée. Je comprends donc, mais je n'ai pas d'exemple à ce sujet.

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

6
Tremendus Apps

Commencez par installer jquery à l’aide de npm,

npm install jquery --save

J'utilise:

global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
2
Rafael Andrs Cspedes Basterio

Je l'utilise comme ça:

import jQuery from 'jQuery'

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

Étape 1 Nous nous plaçons avec le terminal dans le dossier de notre projet et installons JQuery via npm ou yarn.

npm install jquery --save

Étape 2 Dans notre fichier où nous voulons utiliser JQuery, par exemple app.js (resources/js/app.js), nous incluons le code suivant dans la section script.

// We import JQuery
const $ = require('jquery');
// We declare it globally
window.$ = $;

// You can use it now
$('body').css('background-color', 'orange');

// Here you can add the code for different plugins
0
Vladimir Salguero