如何在 Vue 中使用 jQuery 插件

Question

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

我正在为我的应用程序使用官方 CLI 工具和 de 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 和插件？

提前致谢！

原文由 Luuk Van Dongen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

选项 #1：使用 ProvidePlugin

将 ProvidePlugin 添加到 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 中的 plugins 数组中，以便 jQuery 对所有模块都可用：

 plugins: [

  // ...

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

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

正如@TremendusApps 在他的回答中建议的那样，添加 Expose Loader 包：

 npm install expose-loader --save-dev

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

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

// ...

原文由 prograhammer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

首先使用 npm 安装 jquery，

 npm install jquery --save

在 require(‘/[path_to]/main.js’); 之前添加 app.js

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

原文由 Rafael Andrs Cspedes Basterio 发布，翻译遵循 CC BY-SA 4.0 许可协议