vue中使用jquery(菜鸟)

最新推荐文章于 2022-04-21 14:55:22 发布

jqp1314

最新推荐文章于 2022-04-21 14:55:22 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jqp1314/article/details/80854734

本文详细介绍如何在项目中通过Webpack配置引入jQuery库，并确保其正确工作。步骤包括：使用npm安装jQuery，修改webpack.base.conf.js文件以自动加载jQuery，以及在main.js中导入jQuery。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

npm install jquery --save

2、在项目中找到webpack.base.conf.js 加入以下代码

const webpack = require('webpack');（一般都有 则不用重复）

然后在module.exports最后添加以下代码:

plugins: [
    new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
    })
],
3、最后,在main.js中加入以下代码:

// 引入jquery
import $ from 'jquery';

4、运行

npm run dev

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jqp1314

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue中如何使用jQuery

TechGlide的博客

10-02

4392

在本文中，我们讨论了如何在Vue项目中引入和使用jQuery。最后，我们展示了一个简单的示例，演示了如何在Vue组件中使用jQuery来处理DOM操作。请记住，在使用Vue开发应用时，尽量减少对jQuery的依赖，优先使用Vue的特性和API来进行开发。需要注意的是，尽管Vue和jQuery可以一起使用，但在编写Vue应用时，我们通常建议优先使用Vue的特性和API，避免过度依赖jQuery或直接操作DOM。这将从安装的jQuery模块中导入jQuery，并将其命名为$，这是jQuery的常用别名。

在jquery的load方法局部渲染单页面中使用vue脚手架开发的多页面应用

Smile_Simba的博客

09-02

880

乍一看，不知道是要做一种什么样的效果，首先看一下load方法的描述这是菜鸟教程中的讲解，用load渲染的局部页面，是不需要触及到浏览器的地址栏，所以当用到vue-router时，是会出现很多问题的，不过可以用iframe的方式解决，但又会引发一些其他问题。虽然现在的后台应用基本都是基于三大框架，但是还是有一些公司或个人用的是比较老的开发模式，但是vue的生态圈真实太棒了，各种组件库，模块化开发等。所以就尝试局部渲染仍然沿用load，而开发模式就是vue的工程化开发。如下过程：利用脚手架创建完项目

参与评论您还未登录，请先登录后发表或查看评论

Vue 中使用 jQuery

Cool的博客

10-10

1708

题主Vue小白，入门demo时想在其中使用jQuery（当然可能是不推荐的做法哈，毕竟俩儿的风格不一样，但万一你就需要呢 _^ ^_），结果遇到问题，最终倒腾解决。编译报错：$ is undefined or no-undef '$' is not defined，假设你已经使用vue-cli搭建好了开发的脚手架，接下来，看下面。。。 NPM 安装 jQuery，项目根目录下运行...

Vue中使用jQuery

y521123y的博客

05-12

225

1.npm安装 npm install jquery 2.在需要使用的页面引入 import $ from 'jquery' jquery的触发事件一般都要放在mounted函数中进行操作

Vue中使用jquery

weixin_30787531的博客

05-15

812

在vue项目中，需要实现某些特定的功能时，使用mvvm模式不易实现。因此引入jquery包来完成需求 npm install jqueryimport $ from jquery //在需要使用的页面中 jquery中的触发事件可以自己定义在mounted中，如果需要使用vue中data的数据，直接使用this.msg是无法使用的，需要另外定义const _this = this...

vue中使用jQuery

04-01

5527

安装： cnpm i -S jquery 引入： main.js中全局引入 import $ from 'jquery'; Vue.prototype.$ = $ 使用：直接this.$即可调用jQuery mounted() { this.$.get( 'http://120.76.197.111:8090/geoserver/keshan/ows?service=WFS&version=1.0.0&request=GetFeature&amp

基于Vue2-Calendar改进的日历组件（含中文使用说明）

01-19

我是刚学Vue的菜鸟，在使用过程中需要用到日历控件，由于项目中原来是用jQuery写的，因此用了bootstarp的日历控件，但是配合Vue实在有点蛋疼，不够优雅…… 于是网上搜了好久找到了Vue2-Calendar，不用说，挺好用的...

vue、js jquery的安装和使用教程

PrimaryColor

08-04

1063

一、安装方式。 npm安装： npm i jquery -s 直接引入： <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 二、引入。 import $ from "jquery"; 三、示例。 <div id="a">文字</div> ... console.log($("#a")[0]);//这里打印了获取到的dom元素 $("#a").css("color", "

vue使用微信扫一扫

01-20

vue使用微信扫一扫第一步：安装weixin-js-sdk 和 jquery 包 npm install weixin-js-sdk jquery 第二部：配置wx.config （配置都是后端返回来的，菜鸟前端只需要按需传值过去就可）代码如下 import wx from ...

JQUERY从菜鸟到忍者第二版源码官方备份

尽管现代前端框架（如React、Angular、Vue等）逐渐成为主流，jQuery仍然是一个强大的工具，特别是在维护旧项目或与后端技术栈配合使用时。它与现代框架可以并存使用，因为它提供了底层DOM操作的能力，而且许多现成的...

Vue项目中使用jquery的简单方法

11-29

前言在vue项目中，需要实现某些特定的功能时，使用mvvm模式不易实现。因此引入jquery包来完成需求 jquery中的触发事件可以自己定义在mounted中，如果需要使用vue中data的数据，直接使用this.msg是无法使用的，需要另外定义const _this = this, 存储this.之后便可以在事件中使用_this.msg数据了。需求：在品牌处可以输入，并且会有模糊搜索的下拉框，也可下拉选择，在输入完毕后检验值是否在下拉框中存在，聚焦时蓝色边框，change时如果不存在则红框显示，存在的话就绿框提示，（就是带输入建议的输入框）问题：使用element-ui中的el-a

vue 使用 jQuery

u013239476的博客

07-05

153

参考、转载地址： https://www.cnblogs.com/cazj/p/10870624.html 下载jQuery npm install jquery -S 2.引用 import $ from jquery //在需要使用的页面中 3.使用。要在DOM渲染后使用： mounted() { const that = this; // 使用vue的data $(".jqClick").click(function(){ console.lo

vue中使用jquery

fresh_nam的博客

04-21

1530

文章目录前言一、配置二、步骤1.下载jquery2.引用3.结果前言前一段时间学习了jquery，突发奇想和vue一起用，发现还真可以，特此记录下来。一、配置 vue 2.x版本二、步骤 1.下载jquery 输入命令下载jquery npm install jquery 2.引用在要使用的vue文件中引入jquery <template> <button>点我弹窗</button> </template> <script> /

vue使用jquery

青春正在燃烧的博客

07-24

247

1.引入 npm install jquery -s 2.在vue.config.js加入 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ]

Vue使用jQuery

qq_43610311的博客

08-04

180

main.js import jquery from 'jquery' window.$ = window.jQuery = jquery 在要使用的地方直接 $即可例如 $.ajax({ type: 'POST', url: 'http://localhost:8082/User/Login', dataType: 'json', data: { usercode: "111", passwor

vue里使用jquery

big_borther6的博客

12-29

370

1.安装 npminstall juqery --save; 2.引用 import $ from "jquery" 被点击的元素添加样式，其他兄弟元素移除class @click="clickCard(items,$event)" let ac=$(event.currentTarget); ac.addClass("active").siblings().removeClass("active"); currentTarget是返回绑定事件的那个元素 ...

Vue 里面使用jquery

从盲流子到程序员

03-22

295

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...

在vue中使用jquery

Hit the keyboard hard

01-31

1165

首先默认你已经有了一个vue程序，如果你想在vue中使用jquery，那么请继续阅读。当然，加入你没有一个vue程序，这里也给出创建一个vue程序的命令。当然，你肯定装了vue-cli，不然你不会点进这篇博客 vue init webpack vue-demo01 项目的目录类似如下：对了，这个demo里使用了element-ui 安装方式： npm i element-ui -S 配置...