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中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项 一.使用方法: 1. 在HTML中 2. 在VUE项目中 二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
- created写法_在vue中created、mounted等方法使用小结
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
- 在vue中methods互相调用的方法
在vue中methods互相调用的方法 转载于:https://www.cnblogs.com/macT/p/10212878.html
- vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
- Vue中v-bind=“$attrs”的使用方法
$attrs 主要用于组件之间的隔代传值.例如有 父组件A,子组件B,孙组件C 三个组件. 在A组件中传值给C,可直接在B中的C上设置v-bind="$attrs",然后在C组件中 ...
- FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
- Vue中插入HTML代码的方法
我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做? 一.使用v-html v-html:更新元 ...
- 怎么在网站中正确使用JQuery代码
一.在header.php的head标签中加载jQuery库(非加不可): <script type="text/javascript" src="http://a ...
- 【Vue】Vue中传值的几种方法,案例代码解析
目录 一.反向传值(子组件传值给父组件) 二.$refs 三.$parent 四.$children 五.$attrs/$listeners -----多层传值 六.$root ----根组件 七.依 ...
最新文章
- 构建深度学习框架运行平台
- 转:PHP Liunx 服务安全防范方案
- Java高级编程细节-动态代理-进阶高级开发必学技能
- eplan可运行于linux系统吗,Eplan安装对电脑操作系统的要求
- 多点认证wi-fi_准备使用Wi-Fi 6:认证将于2019年第三季度启动
- js designMode contentEditable 编辑在线网页
- 路由交换基础——NAT(网络地址转换)
- Operating System-进程间互斥的方案-保证同一时间只有一个进程进入临界区(3)- TSL指令...
- easyui textarea IE8中无法换行
- 开关电源的电感选择和布局布线
- 止增笑耳的星际迷航前传
- matlab基础知识与简单操作
- Blocked a frame with origin XXX from accessing a cross-origin 跨域问题解决方案
- 太原理工web课程答案——web程序设计课程答案 (第八章 CSS3页面布局)持续发布中——
- SEO流量增长10倍:筛选导航优化
- 震惊!某程序员吐槽零基础自学编程很难,真的是这样吗?
- 重庆北大青鸟python培训
- gmod服务器文件,Garry’s Mod|Gmod服务器架设教程(四)挂载创意工坊插件
- 多个input设置全选中的两种方式
- 做软文发布需要注意哪些细节?