jq的插件 vue中引用_如何在Vue中使用jQuery插件

I'm building a web application inside VueJS but I encounter a problem. I want to use a jQuery extension (cropit to be specific) but I don't know how to instantiate/require/import it the right way without getting errors.

I'm using de official CLI tool and de webpack template for my App.

I included jQuery like this in my main.js file:

import jQuery from 'jQuery'

window.jQuery = jQuery

Now I'm building an image editor component where I want to instantiate crept like this:

export default {

ready () {

$(document).ready(function ($) {

$('#image-cropper-wrapper-element').cropit({ /* options */ })

})

},

}

But I keep getting errors...Now my question is how to properly instantiate jQuery and plugins via NPM/Webpack/Vue?

Thanks in advance!

解决方案

Option #1: Use ProvidePlugin

Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery becomes globally available to all your modules:

plugins: [

// ...

new webpack.ProvidePlugin({

$: 'jquery',

jquery: 'jquery',

'window.jQuery': 'jquery',

jQuery: 'jquery'

})

]

Option #2: Use Expose Loader module for webpack

As @TremendusApps suggests in his answer, add the Expose Loader package:

npm install expose-loader --save-dev

Use in your entry point main.js like this:

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

// ...