Vue中正确使用jQuery的方法

题主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。

 

 

转: https://www.jb51.net/article/127102.htm

 

 

 

转载于:https://www.cnblogs.com/fps2tao/p/9565570.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/426966.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python中superclass是什么_深度解析并实现python中的super(转载,好文)

大神半个月的成绩,让我看的叹为观止,建议看原帖地址,会让你对Python的描述符有更强的认识。原文链接:https://blog.csdn.net/zhangjg_blog/article/details/83033210深度解析并实现python中的super概述super的定义函数bound和描述…

实例12:python

#判断101-200之间有多少个素数,并输出所有素数。 #程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数。 #!/usr/bin/python -- coding: UTF-8 -- #…

linux显示gz文件字节大小,[原创] 如何不解压tar.gz文件查看其中的文件大小

如果你有一个上百G的tar.gz文件,要查看里面的每个文件的大小的话,解压出来可能太费时间,而且要占用大量磁盘空间。因此,不解压查看文件大小很有必要。不解压一个tar.gz文件,查看里面的文件明细的命令为:tar…

javascript用户登录_SAP HANA XS的JavaScript安全事项

公众号:matinal前言部分我们都知道web程序都有潜在的安全隐患问题,那么SAP HANA XS的JavaScript也是一样,使用服务器端JavaScript编写应用程序代码,也有潜在的外部攻击(和风险)。注意事项下面列出几点注意事…

周进度报告8

在本周中主要因为c小学期,对Java的学习较少,下周会合理安排时间转载于:https://www.cnblogs.com/NCLONG/p/9574965.html

Python sqrt() 函数

描述 sqrt() 方法返回数字x的平方根。 语法 以下是 sqrt() 方法的语法: import math math.sqrt( x ) 注意:sqrt()是不能直接访问的,需要导入 math 模块,通过静态对象调用该方法。 参数 • x – 数值表达式。 返回值 返回数字x的平方根。 实例…

linux 网络设备 安装,Linux_Linux系统配置网络详解,一.安装和配置网络设备- phpStudy...

一.安装和配置网络设备在安装linux时,如果你有网卡,安装程序将会提示你给出tcp/ip网络的配置参数,如本机的ip地址,缺省网关的ip地址,DNS的ip地址等等.根据这些配置参数,安装程序将会自动把网卡(linux系统首先要支持)驱动程序编译到内核中去.但是我们一定要了解加载网卡驱动程序…

python透明图片合并_Python用OpenCV合并图片,添加透明部分

看了python网上图片合并都是互抄,其实大部分人需要的合并只需要把一个图片粘贴到另一张图片就行了。下面是合并前的图片:底图下面是需要合并的素材:需要合并的素材合并后的效果:合并后的图片图片准备工作:1: 确保两张图…

实例13:python

#题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身。例如:153是一个"水仙花数",因为1531的三次方+5的三次方+3的三次方…

spring的基本用法

关于spring的几种注入方式 理解类之间的关联关系 一,set注入 在这之前我们得spring的jar包,可以去官网下,添加到WebContent下 WEB-INF 下 lib里 这种方式就得首先实现set方法,现在以英雄(Hero接口)和武器&a…

python u_对python 命令的-u参数详解

缘起:今天在看arcface的训练代码,在shell脚本中运行python 命令时后面加了-u 参数(python -u xx.py),于是对这个参数进行了下小研究。准备知识用网上的一个程序示例来说明,python中标准错误(std.err)和标准输出(std.out)的输出规则…

linux下anaconda3安装教程,Ubuntu18.04 安装 Anaconda3的教程详解

Anaconda指的是一个开源的Python发行版本,其包含了conda、Python等180多个科学包及其依赖项。 因为包含了大量的科学包,Anaconda 的下载文件比较大(约 531 MB),如果只需要某些包,或者需要节省带宽或存储空间,也可以使用…

实例14:python

#将一个正整数分解质因数。例如:输入90,打印出90233*5。 #对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成: #(1)如果这个质数恰等于n,则说明分解质因数的过程已经结束,打印出即可。 #(2)如…

call,apply,bind的用法与区别

1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这三个方法其实都是继承自…

while(1)和while(0)

while语句的原型是while(表达式)语句,当表达式为非0值时,执行while语句中的嵌套语句。 1.while(1)其中1代表一个常量表达式,它永远不会等于0。循环会一直执行下去。除非你设置break等类似的跳出循环语句循环才会中止。 2.while(i–)其中i是一…

幅值与峰峰值的计算_电厂振动测量、计算基础及汽轮机组振动标准!

法律顾问:张友全律师正文:电厂振动测量、计算基础及汽轮机组振动标准!1. 常用的振动测量参数常用的振动测量参数有振幅、振动速度(振速)、振动加速度。对应单位表示为:mm、mm/s、mm/s。 振幅是表象,定义为在波动或振动…

实例15:python

#利用条件运算符的嵌套来完成此题:学习成绩>90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。 #!/usr/bin/python -- coding: UTF-8 -- score int(input(‘输入分数:\n’)) if score > 90: grade ‘A’ elif score &g…

对比分析

【课程1.3】 对比分析对比分析 → 两个互相联系的指标进行比较绝对数比较(相减) / 相对数比较(相除) 结构分析、比例分析、空间比较分析、动态对比分析 import numpy as np import pandas as pd import matplotlib.pyplot as plt…

平面设计中的网格系统pdf_深入浅出,带你认识网格系统与版式设计

设计分享 研习设 设计Hello大家好,这里是研习设计分享。时不时分享/新鲜/有趣/有料/设计资讯和案例,欢迎大家订阅关注!~预估阅读时间:10分钟ME研习设小研研:今天,和大家深入浅出,带你认识网格系…

qt支持Linux下word导出么,qt怎么实现保存到Word

回答:怎样将Word文档保存到桌面?平时我们在学习、工作的时候都会用到Word文档,当使用Word文档编辑完文件后需要进行保存。可以把Word文档保存到系统盘中,也可以直接保存到桌面上方便今后查找。那么Word文档怎么保存到桌面呢&#…