这篇文章将为大家详细讲解有关vue中jquery的用法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
十余年的临城网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整临城建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“临城网站设计”,“临城网站推广”以来,每个客户项目都认真落实执行。
vue中jquery的使用方法:首先使用NPM安装jQuery,项目根目录下运行相关代码;然后配置webpack,代码为【var webpack = require('webpack')】。
vue中jquery的使用方法:
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。
关于“vue中jquery的用法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。