如何在 Vue 中使用 jQuery 插件

我正在 VueJS 中构建一个 Web 应用程序，但遇到了问题。我想使用 jQuery 扩展（具体来说是cropit），但我不知道如何以正确的方式实例化/要求/导入它而不会出现错误。

我正在为我的应用程序使用官方 CLI 工具和 webpack 模板。

我在 main.js 文件中包含了这样的 jQuery：

import jQuery from 'jQuery'
window.jQuery = jQuery

现在我正在构建一个图像编辑器组件，我想在其中实例化 crept，如下所示：

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

但我不断收到错误...现在我的问题是如何通过 NPM/Webpack/Vue 正确实例化 jQuery 和插件？

选项#1：使用 ProvidePlugin

Add the 提供插件到两个中的插件数组build/webpack.dev.conf.js and build/webpack.prod.conf.js这样 jQuery 就可以在您的所有模块中全局使用：

plugins: [

  // ...

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

选项#2：为 webpack 使用 Expose Loader 模块

正如 @TremendusApps 在他的回答中建议的那样，添加暴露加载程序包裹：

npm install expose-loader --save-dev

在您的入口点中使用main.js像这样：

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

// ...