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写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jquery自定义组件实例详解
Dec 31 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
php4的彩蛋
2006/10/09 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
Open and Print a Word Document
2007/06/15 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Python求导数的方法
2015/05/09 Python
详解Python迭代和迭代器
2016/03/28 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python中Yield的基本用法
2020/10/18 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书