usar - vue cli jquery plugin

Cómo usar un plugin jQuery dentro de Vue

Question

Estoy construyendo una aplicación web dentro de VueJS pero encuentro un problema. Quiero usar una extensión jQuery (cropit para ser específica) pero no sé cómo instanciar / requerir / importar de la manera correcta sin obtener errores.

Estoy usando la herramienta CLI oficial y la plantilla de webpack para mi aplicación.

Incluí jQuery así en mi archivo main.js:

import jQuery from ''jQuery''
window.jQuery = jQuery

Ahora estoy construyendo un componente de editor de imágenes donde quiero crear instancias de este modo:

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

Pero sigo recibiendo errores ... ¿Ahora mi pregunta es cómo instanciar adecuadamente jQuery y los complementos a través de NPM / Webpack / Vue?

¡Gracias por adelantado!

Answer 1

Debe usar el cargador global o el cargador de expose para asegurarse de que el paquete web incluya jQuery lib en la salida del código fuente y para que no genere errores cuando utilice $ en sus componentes.

// 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 lo prefiere, puede importarlo (requerirlo) directamente dentro de la configuración de su paquete web como punto de entrada, así que lo entiendo, pero no tengo un ejemplo de esto a mano.

Alternativamente, puede usar el cargador de Global como este: https://www.npmjs.com/package/globals-loader

Answer 2

Lo uso así:

import jQuery from ''jQuery''

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

Answer 3

Primero instala jquery usando npm,

npm install jquery --save

Yo suelo:

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

Answer 4

Supongamos que tiene un proyecto Vue creado con vue-cli (por ejemplo, vue init webpack my-project). Ir al directorio del proyecto y ejecutar

npm install jquery --save-dev

Abra el archivo build/webpack.base.conf.js y agregue plugins :

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

También en la parte superior del archivo, agregue:

const webpack = require(''webpack'')

Si está utilizando ESLint, abra .eslintrc.js y agregue los siguientes elementos globales: {

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

Ahora estás listo para ir. Usa $ en cualquier lugar en tu js.

NOTA No es necesario que incluya expose loader ni ningún otro miembro del personal para usar esto.

Originalmente desde https://maketips.net/tip/223/how-to-include-jquery-into-vuejs

Answer 5

Opción # 1: Use ProvidePlugin

Agregue ProvidePlugin a la matriz de complementos en build/webpack.dev.conf.js y build/webpack.prod.conf.js para que jQuery esté disponible globalmente para todos sus módulos:

plugins: [

  // ...

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

Opción n. ° 2: use el módulo Expose Loader para el paquete web

Como @TremendusApps sugiere en su respuesta, agregue el paquete Expose Loader :

npm install expose-loader --save-dev

Use en su punto de entrada main.js esta manera:

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

// ...