序

如果vue是前端工程中使用的骨架，那么JavaScript就是我们前端的细胞。MVVM模式让我们体验到了前端开发的可移植性，不用过多考虑DOM操作。而vue的逐渐发展(一步一步引用组件，根据需要引入组件)也让很多新手前端开发人员逐渐绕过了jQuery的学习。jQuery需要记住很多东西，这使得JQuery不太受新开发人员的欢迎。

当前端工程的需求不流行时，很多公司使用后端渲染技术。为了实现友好的前端交互，需要编写大量的jQuery、JavaScript和CSS，所以仍然有大量的公司维护和使用jQuery。

前端工程让很多人看到了开发效率，但是公司还是需要维护产品线，所以解决jQuery在vue的使用是每个前端工程师的必经之路。毕竟，从头开始造轮子是非常痛苦和耗时的。

今天我们提供两种方法供大家参考，记得选择其中一种。

方法一：将JQ引入网页(推荐)

在vue中安装jQuery组件

村民们已经默认你使用了vue-cli脚手架来操作。至于如何使用vue-cli，可以查看vue官网的相关开发文档。

1.在项目终端中输入npm install jquery -save-dev2。在构建文件夹中找到webpack.base.conf.js文件，打开它，并将其添加到第一行

var webpack=require('webpack ')

效果：

//web pack . base . conf . jsvar web pack=require(' web pack ')'使用严格的' const path=require(' path ')const utils=require('。/utils') Const config=require('./config’)3。添加：

插件：[新的网络包。provideplugin ({$:' jquery '，jquery 3360' jquery '，' windows。jquery' :' jquery'})]，1。输入：

从“jQuery”导入$ 0

提示：这里不需要在下面注册，有些IDE会用红色提示，不需要处理。

检查执行效果

在app.vue中写一个案例

这种方法是一种很有前途的开发方法，并且方便易用。同样，我们不想在所有页面上都引用jQuery，所以我们会考虑按需引用。

方法2:根据需要引用jQuery方法

此方法仅在单个页面中使用jQuery时有效。这种方法适用于很少的交互式页面。

jQuery的安装和配置

1.与方法1中的操作一致，将其输入终端

npm安装jquery -保存-开发

2.在生成中找到webpack.base.conf文件

//web pack . base . confm module . exports={ resolve : { extension s 3360[]。js '，'。vue '，'。json']，alias : { ' vue $ ' : ' vue/dist/vue . ESM . js '，@' : resolve ('src ')，' jquery' :路径。resolve (_ _ dirname '，/node _ modules/jquery/src/jquery ')} }对jq的引用

在APP.vue或你需要使用它的地方

模板div p class='jj '请从' jquery '导出默认{name :' app，mounted () {$('中单击me/p/div/templatescriptimport $ '。jj ')。click(function(){ alert(1)})} }/脚本结论

有成千上万种方法和第一原则。本文是我在开发中遇到jq无法引入后的一种查阅资料和整理的方法。但是不管是什么方法，我们的最终目标都是满足项目的需求。随着技术的快速创新和时代的快速发展，jQuery也在不断发展。很多人觉得这种语言太复杂多变，但就像学习python一样，开始是“学一会儿，总要学很久”，但当你到达技术瓶颈时，你总会发现很难。我遇到了许多vue处理的问题，迫使我阅读底层技术。因此，学习、有效的努力和持续的产出是没有止境的。

以上就是边肖介绍的两种让vue实现jQuery调用的方法，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！