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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
AJAX在JQuery中的应用详解
Jan 30 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
一个数据采集类
2007/02/14 PHP
PHP里的单例类写法实例
2015/06/25 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python基本语法经典教程
2016/03/11 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python 闭包的使用方法
2017/09/07 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python判断是空的实例分享
2020/07/06 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python