Vue中正确使用jQuery的方法
作者:Yann001 时间:2023-07-02 17:07:45
题主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。
来源:http://www.cnblogs.com/Yann001/p/6850698.html#3825528
标签:Vue,jQuery
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python多继承以及MRO顺序的使用
2022-04-01 19:35:50
用实例分析如何整理SQL Server输入数据
2009-01-20 15:16:00
MySQL数据库维护中监控所用到的常用命令
2024-01-28 03:23:24
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2024-04-17 10:38:52
![](https://img.aspxhome.com/file/2023/1/136191_0s.gif)
如何在pycharm中快捷安装pip命令(如pygame)
2023-02-26 14:53:25
![](https://img.aspxhome.com/file/2023/0/124130_0s.png)
css reset中的list-style:none
2010-05-26 13:56:00
![](https://img.aspxhome.com/file/UploadPic/20105/26/01-62s.jpg)
详解SqlServer数据库中Substring函数的用法
2024-01-28 00:49:06
![](https://img.aspxhome.com/file/2023/9/106209_0s.png)
python中子类与父类的关系基础知识点
2022-11-26 23:45:12
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2022-05-09 18:58:43
![](https://img.aspxhome.com/file/2023/2/117852_0s.png)
c#数据绑定之向查询中添加参数(.Net连接外部数据库)
2024-01-25 00:59:03
django如何根据现有数据库表生成model详解
2024-01-17 02:29:21
![](https://img.aspxhome.com/file/2023/3/91983_0s.png)
Web 开发常用工具 大家自己查找下载
2022-09-20 23:58:30
![](https://img.aspxhome.com/file/2023/1/132441_0s.jpg)
php 使用 __call实现重载功能示例
2023-07-13 20:10:28
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2023-12-13 17:38:55
![](https://img.aspxhome.com/file/2023/3/124223_0s.png)
Python中__repr__和__str__区别详解
2022-02-17 04:45:25
python框架Django实战商城项目之工程搭建过程图文详解
2022-12-16 16:25:57
![](https://img.aspxhome.com/file/2023/6/72046_0s.jpg)
浅谈django的render函数的参数问题
2022-07-10 18:39:20
Python自定义一个类实现字典dict功能的方法
2023-07-20 22:45:59
python中Tkinter实现分页标签的示例代码
2021-10-26 11:30:05
![](https://img.aspxhome.com/file/2023/4/114584_0s.png)
Fuse.js模糊查询算法学习指南
2024-04-19 11:02:54