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
Vue中正确使用jQuery的方法的更多相关文章
- Vue中使用webpack别名的方法
在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../commo ...
- Vue中的scoped及穿透方法
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- Vue中,过滤器的使用方法!
Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:(借官方的 ...
- Vue中的scoped及穿透方法(修改第三方组件局部的样式)
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- Vue中的“混合”——mixins使用方法
混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...
- vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
- swiper在vue中正确的使用方法
1.安装swiper,执行npm install vue-awesome-swiper --save命令 2.在main.js中添加下面三行 import 'swiper/dist/css/swipe ...
- Vue中遍历数组的新方法
1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
随机推荐
- 关于String 后面跟省略号。。。
今天阅读MonkeyRunner源码的时候发现下面一段: private String shell(String... args) { StringBuilder cmd = new StringBu ...
- sql 循环插入某一条数据
declare @i int set @i=1 while @i<(10000)begin INSERT INTO [Table]( [IDi] ,[IDo] ,[Synci] ) ( SELE ...
- 9.线程通信wait、notify
线程之间通信 1.线程是操作系统的独立的个体,但这些个体如果不经过特殊处理就不能成为一个整体. 2.使用wait.notify,方法实现线程通信(2个方法都是需要object方法) 3.wait(释放 ...
- 使用 Kafka 和 Spark Streaming 构建实时数据处理系统(转)
原文链接:http://www.ibm.com/developerworks/cn/opensource/os-cn-spark-practice2/index.html?ca=drs-&ut ...
- java中的char占几个字节
1:“字节”是byte,“位”是bit : 2: 1 byte = 8 bit : char 在Java中是2个字节.java采用unicode,2个字节(16位)来表示一个字符. 例子代码如下: p ...
- docker仓库操作
1.登陆注册 docker login 2.搜索镜像 docker search xxx 3.上传镜像 docker push 镜像名:标签或者镜像ID 4.下载镜像 docker pull 镜像名: ...
- 折叠伸缩工具栏 CollapsingToolbarLayout
PS:这是一个超级超级垃圾的控件,强烈建议放弃使用! demo地址:https://github.com/baiqiantao/CollapsingDemo.git 一个类似的效果的库,有800个星 ...
- Ripple 水波纹效果
背景+波纹 对于有边界限制的Ripple,我们就需要给他提供一个范围,即添加一个item标签. 如果在一个ripple标签中,添加一个item标签,在item中添加如下属性: [android:dra ...
- xcode 5 使用 XCTest 做单元测试
xcode 5 使用 XCTest 做单元测试 什么是单元测试,请看 百度百科 单元测试 一:在xcode5 之前,我们新建项目时,可以选择是否集成单元测试:如今在xcode5,我们新建立的项目默认就 ...
- 自己定义iOS上双击Home键图切换
假设双击Home.会来到iOS App的switcher页面,在这儿列出了当前系统挂起的App, 上面有每一个App的切屏,相信大家都熟悉这个东东了. 它事实上是每一个App在挂起前,对App后个载屏 ...