脚本宝典收集整理的这篇文章主要介绍了vue怎么调用jquery包,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue调用jquery包的方法:首先引用jQuery包,并进入项目文件夹;然后安装jQuery包,找到脚手架build文件夹下添加相关代码;最后引用jquery,并在弹窗显示即可。
本教程操作环境:windows7系统、jquery3.2.1&&Vue2.9.6版,DELL G3电脑。
【相关文章推荐:vue.js】
vue调用jquery包的方法:
第一步
在Package.json里的dePEndencies加入一行
"jquery" : "^3.2.1"
引用jQuery包
第二步
cd 你的项目名称
进入项目文件夹
运行
npm install jquery --save-dev
安装jQuery包
@H_512_45@
第三步
找到脚手架build文件夹下的webpack.base.conf.js文件
在最上方添加一行:
VAR webpack=require('webpack')
第四步
找到脚手架build文件夹下的webpack.base.conf.js文件
module.@R_406_995@s中加入插件plugins:
[ new webpack.PRovidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ],
第五步
在项目的入口文件中main.js中添加一行
import $ From 'jquery'
引用jquery
第六步
在测试组件用例HelloWorld.vue中
添加HTML代码
<h1 id="test">Test Jquery</h1>
添加JS代码
$('#test').click(function(){ alert('Test Jquery Success!');});
第七步
npm run dev进行编译 然后浏览器中输入127.0.0.1:8080
访问页面点击Test Jquery
如果弹出窗口显示Test Jquery Success!
表示JQuery引用成功
相关免费学习推荐:javascript(视频)
以上就是vue怎么调用jquery包的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue怎么调用jquery包全部内容,希望文章能够帮你解决vue怎么调用jquery包所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。