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 l'instancier/exiger/l'importer de la bonne façon sans obtenir d'erreurs.
J'utilise l'outil CLI officiel et le modèle de webpack pour mon application.
J'ai inclus jQuery comme ça dans mon principal.fichier js:
import jQuery from 'jQuery'
window.jQuery = jQuery
Maintenant, je construis un composant d'éditeur d'image où je veux instancier glissé comme ceci:
export default {
ready () {
$(document).ready(function ($) {
$('#image-cropper-wrapper-element').cropit({ /* options */ })
})
},
}
Mais Je reçois des erreurs...Maintenant, ma question Est de savoir comment instancier correctement jQuery et plugins via NPM / Webpack / Vue?
Merci d'avance!
5 réponses
Option #1: Utiliser ProvidePlugin
Ajoutez le ProvidePlugin au tableau des plugins à la fois 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 # 2: Utiliser le module exposer Loader pour webpack
Comme @ Trementusapps le suggère dans sa réponse, ajoutez le paquetExpose Loader :
npm install expose-loader --save-dev
Utiliser dans votre point d'entrée main.js comme ceci:
import 'expose?$!expose?jQuery!jquery'
// ...
Vous devez utiliser le chargeur globals ou le chargeur expose pour vous assurer que webpack inclut la lib jQuery dans votre sortie de code source et qu'il 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 (require) directement dans votre configuration webpack en tant que point d'entrée, donc je comprends, mais je n'ai pas un exemple de ceci à portée de main
Vous pouvez également utiliser le chargeur globals comme ceci: https://www.npmjs.com/package/globals-loader
Je l'utilise comme ceci:
import jQuery from 'jQuery'
ready: function() {
var self = this;
jQuery(window).resize(function () {
self.$refs.thisherechart.drawChart();
})
},
Installez D'abord jquery en utilisant npm,
npm install jquery --save
J'utilise:
global.jQuery = require('jquery');
var $ = global.jQuery;
widows.$ = $;
Supposons que vous ayez un projet Vue créé avec vue-cli (par exemple vue init webpack my-project). Allez dans le répertoire du projet et exécutez
npm install jquery --save-dev
Ouvrir le fichier build/webpack.base.conf.js et ajoutez plugins:
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
...
}
Aussi en haut du fichier ajouter:
const webpack = require('webpack')
Si vous utilisez ESLint, ouvrez .eslintrc.js et ajoutez les globals suivants: {
module.exports = {
globals: {
"$": true,
"jQuery": true
},
...
Maintenant, vous êtes prêt à aller. Utilisez $ n'importe où dans votre js.
Remarque vous n'avez pas besoin d'inclure exposer loader ou tout autre personnel à utiliser ce.
à l'Origine, à partir de https://maketips.net/tip/223/how-to-include-jquery-into-vuejs