如何在 Vue 中使用 jQuery 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37928998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use a jQuery plugin inside Vue
提问by Luuk Van Dongen
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.
我正在 VueJS 中构建一个 Web 应用程序，但遇到了一个问题。我想使用 jQuery 扩展（具体来说是cropit），但我不知道如何以正确的方式实例化/要求/导入它而不会出错。
I'm using de official CLI tool and de webpack template for my App.
我正在为我的应用程序使用官方 CLI 工具和 webpack 模板。
I included jQuery like this in my main.js file:
我在 main.js 文件中包含了这样的 jQuery：
import jQuery from 'jQuery'
window.jQuery = jQuery
Now I'm building an image editor component where I want to instantiate crept like this:
现在我正在构建一个图像编辑器组件，我想像这样实例化 crept：
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?
但我不断收到错误...现在我的问题是如何通过 NPM/Webpack/Vue 正确实例化 jQuery 和插件？
Thanks in advance!
提前致谢！
回答by prograhammer
Option #1: Use ProvidePlugin
选项#1：使用ProvidePlugin
Add the ProvidePluginto the plugins array in both build/webpack.dev.conf.jsand build/webpack.prod.conf.jsso that jQuery becomes globally available to all your modules:
将ProvidePlugin添加到两者的 plugins 数组中build/webpack.dev.conf.js，build/webpack.prod.conf.js以便 jQuery 对您的所有模块全局可用：
plugins: [
// ...
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
Option #2: Use Expose Loader module for webpack
选项 #2：为 webpack 使用 Expose Loader 模块
As @TremendusApps suggests in his answer, add the Expose Loaderpackage:
正如@TremendusApps 在他的回答中所建议的那样，添加Expose Loader包：
npm install expose-loader --save-dev
Use in your entry point main.jslike this:
main.js像这样在你的入口点使用：
import 'expose?$!expose?jQuery!jquery'
// ...
回答by Tremendus Apps
You need to use either the globalsloader or exposeloader to ensure that webpack includes the jQuery lib in your source code output and so that it doesn't throw errors when your use $ in your components.
你需要使用globalsloader 或exposeloader 来确保 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')
If you prefer, you can import (require) it directly within your webpack config as a point of entry, so I understand, but I don't have an example of this to hand
如果你愿意，你可以直接在你的 webpack 配置中导入（需要）它作为入口点，所以我理解，但我没有这样的例子
Alternatively, you can use the globals loader like this: https://www.npmjs.com/package/globals-loader
或者，您可以像这样使用全局加载器：https: //www.npmjs.com/package/globals-loader
回答by Rafael Andrs Cspedes Basterio
First install jquery using npm,
首先使用 npm 安装 jquery，
npm install jquery --save
I use:
我用：
global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
回答by SkuraZZ
Suppose you have Vue project created with vue-cli (e.g. vue init webpack my-project). Go to project dir and run
假设您有使用 vue-cli 创建的 Vue 项目（例如 vue init webpack my-project）。转到项目目录并运行
npm install jquery --save
npm install jquery --save
Open file build/webpack.base.conf.jsand add plugins:
打开文件build/webpack.base.conf.js并添加plugins：
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
...
}
Also at top of file add:
同样在文件顶部添加：
const webpack = require('webpack')
const webpack = require('webpack')
If you are using ESLint, open .eslintrc.jsand add next globals: {
如果您使用 ESLint，请打开.eslintrc.js并添加下一个全局变量：{
module.exports = {
globals: {
"$": true,
"jQuery": true
},
...
Now you are ready to go. Use $ anywhere in your js.
现在你准备好了。在你的 js 中的任何地方使用 $。
NOTEYou don't need to include expose loader or any other stuff to use this.
注意您不需要包含公开加载程序或任何其他东西来使用它。
Originally from https://maketips.net/tip/223/how-to-include-jquery-into-vuejs
最初来自https://maketips.net/tip/223/how-to-include-jquery-into-vuejs
回答by lukpep
I use it like this:
我像这样使用它：
import jQuery from 'jQuery'
ready: function() {
var self = this;
jQuery(window).resize(function () {
self.$refs.thisherechart.drawChart();
})
},
回答by Wagner
import jquery within <script> tag in your vue file.
在 vue 文件中的 <script> 标签内导入 jquery。
I think this is the easiest way.
我认为这是最简单的方法。
For example,
例如，
<script>
import $ from "jquery";
export default {
name: 'welcome',
mounted: function() {
window.setTimeout(function() {
$('.logo').css('opacity', 0);
}, 1000);
}
}
</script>
回答by Vladimir Salguero
Step 1We place ourselves with the terminal in the folder of our project and install JQuery through npm or yarn.
Step 1我们将自己与终端放在我们项目的文件夹中，并通过npm或yarn安装JQuery。
npm install jquery --save
Step 2Within our file where we want to use JQuery, for example app.js (resources/js/app.js), in the script section we include the following code.
步骤 2在我们想要使用 JQuery 的文件中，例如 app.js ( resources/js/app.js)，在脚本部分我们包含以下代码。
// We import JQuery
const $ = require('jquery');
// We declare it globally
window.$ = $;
// You can use it now
$('body').css('background-color', 'orange');
// Here you can add the code for different plugins
回答by ccleve
There's a much, much easier way. Do this:
有一个更简单的方法。做这个：
MyComponent.vue
<template>
stuff here
</template>
<script>
import $ from 'jquery';
import 'selectize';
$(function() {
// use jquery
$('body').css('background-color', 'orange');
// use selectize, s jquery plugin
$('#myselect').selectize( options go here );
});
</script>
Make sure JQuery is installed first with npm install jquery. Do the same with your plugin.
确保首先使用npm install jquery. 对你的插件做同样的事情。
