javascript 将 Jquery 添加到 Vue-Cli 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53355086/
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
Add Jquery to Vue-Cli 3
提问by nonNumericalFloat
I'm currently trying to add Jquery to my vue-cliproject. I am aware of the missbehaviour it can produce, but anyway; Since there is no build/webpack.base.conf.jsanymore I tried editing vue.config.jsby adding:
我目前正在尝试将 Jquery 添加到我的vue-cli项目中。我知道它可能产生的错误行为，但无论如何；由于build/webpack.base.conf.js不再有我尝试vue.config.js通过添加进行编辑：
module.exports {
...
chainWebpack: config => {
config.plugin('define').tap(definitions => {
definitions[0] = Object.assign(definitions[0], {
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery',
_: 'lodash'
})
return definitions
})
}
...
}
or
或者
const webpack = require('webpack')
module.exports {
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
...
}
Both options don't seem to work. With #1 nothing seems to happen, with #2 I get the compile error; "plugins" is not allowed or 'ProvidePlugin' is unresolved and when I try to import jQuery directly in main.js and define the $ operator, jquery stays undefinded when I try to use it.
这两个选项似乎都不起作用。#1 似乎什么也没发生，#2 我得到编译错误；不允许使用“插件”或“ProvidePlugin”未解析，当我尝试在 main.js 中直接导入 jQuery 并定义 $ 运算符时，当我尝试使用它时，jquery 保持未定义状态。
Big thank you in advance!
非常感谢您提前！
回答by nonNumericalFloat
Solved itby adding to main.js
通过添加到解决它main.js
window.$ = window.jQuery = require('jquery');
That did it for me and jQuery is now available globally.
这对我来说是成功的，现在 jQuery 可以在全球范围内使用。
Another approach would be;
另一种方法是；
Vue.use({
install: function(Vue, options){
Vue.prototype.$jQuery = require('jquery'); // you'll have this.$jQuery anywhere in your vue project
}
});
I hope this will help someone stumbling over the same problem in the future. If you still can't figure it out, check this questionor have a look at the documentation.
我希望这会帮助将来遇到同样问题的人。如果您仍然无法弄清楚，请检查此问题或查看文档。
edit:make sure you ran npm install jquery.
编辑：确保你跑了npm install jquery。
回答by Rdzawobrody
#2 You forget to add configureWebpackinto vue.config.js
#2 你忘记在vue.config.js 中添加configureWebpack
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
},
}
回答by ArifMustafa
I did it by following steps:
我是按照以下步骤完成的：
first install jquery
首先安装jquery
npm install jquery --save-dev
in any component or view:
在任何组件或视图中：
<script>
import jQuery from "jquery";
const $ = jQuery;
window.$ = $;
....
....
....
or as above answer, both are same:
或如上答案，两者都是相同的：
window.$ = window.jQuery = require("jquery");
now you can use anywhere in the page, for globally availability, simply follow the above said answer.
现在您可以在页面的任何位置使用，为了全球可用性，只需按照上述答案进行操作。
