vue如何调用jquery包
这篇文章给大家分享的是有关vue如何调用jquery包的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联公司网站建设提供从项目策划、软件开发,软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务,主营业务为成都网站设计、成都做网站,App定制开发以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。创新互联公司深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
vue调用jquery包的方法:首先引用jQuery包,并进入项目文件夹;然后安装jQuery包,找到脚手架build文件夹下添加相关代码;最后引用jquery,并在弹窗显示即可。
vue调用jquery包的方法:
第一步
在package.json里的dependencies加入一行
"jquery" : "^3.2.1"
引用jQuery包
第二步
cd 你的项目名称
进入项目文件夹
运行
npm install jquery --save-dev
安装jQuery包
第三步
找到脚手架build文件夹下的webpack.base.conf.js文件
在最上方添加一行:
var webpack=require('webpack')
第四步
找到脚手架build文件夹下的webpack.base.conf.js文件
module.exports中加入插件plugins:
[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ],
第五步
在项目的入口文件中main.js中添加一行
import $ from 'jquery'
引用jquery
第六步
在测试组件用例HelloWorld.vue中
添加HTML代码
Test Jquery
添加JS代码
$('#test').click(function(){ alert('Test Jquery Success!');});
第七步
npm run dev进行编译 然后浏览器中输入127.0.0.1:8080
访问页面点击Test Jquery
如果弹出窗口显示Test Jquery Success!
表示JQuery引用成功
感谢各位的阅读!关于“vue如何调用jquery包”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网页标题:vue如何调用jquery包
当前地址:http://scyanting.com/article/iijgge.html