如何在Vue中使用jQuery插件
我正在VueJS中构建一个Web应用程序，但是我遇到了一个问题。 我想使用jQuery扩展（cropit是特定的）但我不知道如何以正确的方式实例化/ require / import它而不会出错。
我正在为我的应用程序使用de官方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和插件？
提前致谢！
选项＃1：使用ProvidePlugin
将build/webpack.dev.conf.js添加到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：使用Expose Loader模块进行webpack
正如@TremendusApps在他的回答中建议的那样，添加Expose Loader包：
npm install expose-loader --save-dev
在你的入口点main.js如下：
import 'expose?$!expose?jQuery!jquery' // ...
您需要使用globals加载器或expose加载器来确保webpack在源代码输出中包含jQuery lib，以便在组件中使用$时不会抛出错误。
// 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')
如果您愿意，可以直接在webpack配置中导入（要求）作为入口点，所以我理解，但我没有这方面的例子。
或者，你可以像这样使用全局加载器： https ： //www.npmjs.com/package/globals-loader
我这样使用它：
import jQuery from 'jQuery' ready: function() { var self = this; jQuery(window).resize(function () { self.$refs.thisherechart.drawChart(); }) },
首先使用npm安装jquery，
npm install jquery --save
我用：
global.jQuery = require('jquery'); var $ = global.jQuery; widows.$ = $;
假设您使用vue-cli创建了Vue项目（例如，vue init webpack my-project）。 转到项目目录并运行
npm install jquery --save-dev
打开文件build/webpack.base.conf.js并添加plugins ：
module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery' }) ] ... }
另外在文件顶部添加：
const webpack = require('webpack')
如果您使用的是ESLint，请打开.eslintrc.js并添加下一个全局变量：{
module.exports = { globals: { "$": true, "jQuery": true }, ...
现在你准备好了。 在你的js中使用$ anywhere。
注意您不需要包含公开加载程序或任何其他人员来使用它。
最初来自https://maketips.net/tip/223/how-to-include-jquery-into-vuejs