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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php 数组使用详解 推荐
2011/06/02 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP 类与构造函数解析
2017/02/06 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
vue实现图片懒加载的方法分析
2020/02/05 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 内置模块详解
2019/01/01 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
对python中list的五种查找方法说明
2020/07/13 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
python调用win32接口进行截图的示例
2020/11/11 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
车间组长岗位职责
2013/12/20 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
庆祝教师节主持词
2015/07/06 职场文书