Come utilizzare un plug-in jQuery all'interno di Vue

Sto creando un'applicazione Web all'interno di VueJS ma ho riscontrato un problema. Voglio usare un'estensione jQuery (cropit per essere specifici) ma non so come istanziare/richiedere/importarlo nel modo giusto senza ottenere errori.Come utilizzare un plug-in jQuery all'interno di Vue

Utilizzo lo strumento CLI ufficiale e il modello di webpack per la mia app.

ho incluso jQuery come questo nel mio file main.js:

import jQuery from 'jQuery' 
window.jQuery = jQuery

Ora sto costruendo un componente editor di immagini dove voglio creare un'istanza insinuato in questo modo:

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

Ma io continua a ricevere errori ... Ora la mia domanda è come istanziare correttamente jQuery e plugin tramite NPM/Webpack/Vue?

Grazie in anticipo!

fonte

2016-06-20 Luuk Van Dongen

Opzione # 1: Utilizzare ProvidePlugin

Aggiungere il ProvidePlugin alla matrice plugin sia build/webpack.dev.conf.js e build/webpack.prod.conf.js in modo che jQuery diventa disponibile a livello globale per tutti i moduli:

plugins: [ 

    // ... 

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

Opzione # 2: utilizzare Exposé Loader modulo per webpack

Come @TremendusApps suggerisce nella sua risposta, aggiungere il pacchetto Expose Loader:

npm install expose-loader --save-dev

utilizzare per le punto di ingresso main.js come questo:

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

// ...

fonte

2016-09-23 06:12:56 prograhammer

e se volessi includerlo nel 'webpack.base .conf.js' come lo farei? –

Poiché 'plugins' è un array, la fusione di oggetti sovrascriverà l'array nel conf di base.Quindi quello che potresti fare è mettere la dichiarazione di fusione in una var 'var webpackConfig = merge (baseWebpackConfig, {...}' quindi concatena i plugin 'webpackConfig.plugins = webpackConfig.plugins.concat (baseWebpackConfig.plugins)', e poi finalmente esportiamo 'module.exports = webpackConfig'. Non elegante, ma qualcosa fuori di testa: :-) – prograhammer

hanno appena provato questo, ma tutti i miei test per jquery falliscono usando vue webpackplate boilerplate –

È necessario utilizzare il caricatore globals o il caricatore expose per garantire che il pacchetto Web includa la lib di jQuery nell'output del codice sorgente e che non generi errori quando si utilizzano $ nei componenti.

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

Se si preferisce, è possibile importare (richiede) direttamente all'interno del vostro config webpack come un punto di entrata, così ho capito, ma non ho un esempio di questo a portata di mano

alternativa , è possibile utilizzare il caricatore globali in questo modo: https://www.npmjs.com/package/globals-loader

fonte

2016-06-20 18:13:04

Grazie per la risposta, ma io non sono che gran parte di un esperto in materia. Sai di qualche tipo di tutorial su questo? –

io lo uso come questo:

import jQuery from 'jQuery' 

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

fonte

2016-06-21 06:46:09 lukpep

Ma allora come si aggiunge un plugin a jQuery? Come ho intenzione di fare. –

Per includere un plug-in, è necessario utilizzare dopo l'importazione jquery sopra. 'require (" ")' quindi chiamalo come normale nel codice 'jQuery (finestra). ' –

Come utilizzare un plug-in jQuery all'interno di Vue

risposta

Problemi correlati