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遍历节点方法汇总(推荐)
May 13 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery操作事件完整实例分析
Jan 10 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
西德产收音机
2021/03/01 无线电
php中的MVC模式运用技巧
2007/05/03 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
简单实例处理url特殊符号&处理(2种方法)
2013/04/02 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
国庆节演讲稿
2014/05/27 职场文书
撤诉申请怎么写
2015/05/19 职场文书
婚育证明样本
2015/06/16 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python