Vue中正确使用jQuery的方法


Posted in jQuery onOctober 30, 2017

题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决。

编译报错:$ is undefined or no-undef '$' is not defined

假设你已经使用vue-cli搭建好了开发的脚手架,接下来,看下面。

1.NPM 安装 jQuery,项目根目录下运行以下代码

npm install jquery --save

2.webpack配置

在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用。

var webpack = require('webpack')

然后在module.exports中添加一段代码,

// 原有代码
resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
 }
},
// 添加代码
plugins: [
 new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
 })
],
// 原有代码
module: {
 rules: [
// ......
 ]
}

然后许多其他解决办法到此就说在main.js里导入就可以了,然而题主照着做了。

main.js里导入jQuery

import 'jquery'

在Vue组件里使用 $ or jQuery 写了操作dom的代码

接着启动项目

npm run dev

但是编译却报错了:

http://eslint.org/docs/rules/no-undef '$' is not defined or
http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

咋回事呢???

3.eslint 检查

机智的朋友肯定想到跟eslint有关,没错,这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了,在改文件的module.exports中,为env添加一个键值对 jquery: true 就可以了,也就是:

env: {
 // 原有
 browser: true,
 // 添加
 jquery: true
}

再次 npm run dev ,OK了,没报错,赶紧去组件里试一下吧,console.log($('选择器')) ,你会发现成功使用jQuery获取到了DOM。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery操作css样式
May 15 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 #jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 #jQuery
You might like
PHP Token(令牌)设计
2008/03/15 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
实例讲解python中的序列化知识点
2018/10/08 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
挂职自我鉴定
2014/02/26 职场文书
公司应聘求职信
2014/06/21 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
家长会后的感想
2015/08/11 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android