vue.js怎么用jq

vue.js使用jq的方法:首先NPM安装jQuery,代码为【npm install jquery –save】;然后配置webpack,代码为【var webpack = require(‘webpack’)】;最后检查eslint。

vue.js怎么用jq

【相关文章推荐:vue.js】

vue.js使用jq的方法:

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.js(视频)

以上就是vue.js怎么用jq的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3145058.html

(0)
上一篇 2025年3月30日 07:48:04
下一篇 2025年3月5日 23:16:08

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 初三学生元旦会上课吗2023

    初三学生元旦会上课吗是很多人再问的,毕竟元旦作为法定假,大家都会依法享有三天的假期,但是吧由于初三这一阶段面临着中考,比较特殊,所以一些假期会出现少放不放的情况,下面小编就和大家一起看看。 初三学生元旦会上课吗 元旦当然不上学了,元旦也是国…

    2025年3月30日
    105.5K00
  • vue.js插件是什么意思

    vue.js插件是通常用来为Vue添加全局功能,插件的功能范围没有严格的限制,通过全局方法【Vue.use()】使用插件,需要在你调用【new Vue()】启动应用之前完成。 【相关文章推荐:vue.js】 插件通常用来为 Vue 添加全局…

    2025年3月30日
    100
  • vue.js中循环引用组件报错怎么办

    vue.js中循环引用组件报错的解决办法:在【main.js】里引入全局组件,代码为【import Axios from ‘./utils/axiosPlugin’】。 【相关文章推荐:vue.js】 vue.js中…

    2025年3月30日
    100
  • vue.js中如何绑定事件

    vue.js中绑定事件的方法:1、直接在标签中写js方法,代码为【执行方法的第一种写法】;2、调用method的办法。 【相关文章推荐:vue.js】 vue.js中绑定事件的方法: 1、 直接在标签中写js方法  执行方法的第一种写法 登…

    2025年3月30日
    100
  • vue.js中怎么添加图片

    vue.js中添加图片的方法是:首先将要添加的图片统一放在一个json文件中;然后在vue页面中引用该json文件即可,如【import imgs from “../../static/json/img.json”】…

    2025年3月30日
    100
  • vue.js支持jquery吗?

    vue.js支持jquery。vue中用jquery的方法:首先使用“npm install jquery –save”进行安装;然后配置webpack,在main.js里导入jquery;最后在需要的组件中使用jquery代码…

    2025年3月30日
    100
  • vue.js如何遍历数组

    vue.js遍历数组的方法:1、使用foreach循环,代码为【this.urls.forEach(item =>】;2、使用filter循环,代码为【return this.urls.filter(item =>】。 该方法适…

    2025年3月30日
    100
  • 什么是vue.js插件

    vue.js插件是用来增强技术栈的功能模块,它的目标是Vue;插件也是对Vue的功能的增强和补充;插件通常用来为Vue添加全局功能,但是插件的功能范围没有严格的限制。 本文操作环境:windows10系统、vue2.9版本、thinkpad…

    2025年3月30日
    100
  • vue.js如何安装jq

    vue.js安装jq的方法:首先通过命令“npm install jquery –save”安装JQuery;然后修改配置文件;接着在main.js文件中引入JQuery;最后重启项目即可。 本教程操作环境:windows7系统…

    2025年3月30日
    100
  • Vue中8个实用的自定义指令(分享)

    在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。 相关推荐:《vue.js教程》 Vue 自定义指令有全…

    2025年3月30日
    100

发表回复

登录后才能评论