vue开发：vue中引入jquery

最新推荐文章于 2023-10-23 14:16:09 发布
最新推荐文章于 2023-10-23 14:16:09 发布
阅读量1.9k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Generon/article/details/72836026
本文介绍如何在项目中安装并配置jQuery以供Webpack使用。主要内容包括使用npm安装jQuery、在Webpack配置文件中设置ProvidePlugin插件以全局引入jQuery，以及在Vue组件中导入jQuery。

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

一、安装jQuery：npm install jquery --save-dev;

二、找到项目根目录下webpack.config.js》 在module.exports》 plugins里面添加一下代码：

new webpack.ProvidePlugin({
  jQuery: "jquery",
  $: "jquery"
}),
三、在App.vue页面引入（放在script标签里面）： 

//引入jquery
import $ from 'jquery'

四、重新npm run dev一下。


Vue实战指南：Vue引入jQuery的方法和配置
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-19 3708
jQuery是一个快速、简洁的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画等操作，并且提供了一种简便的方式来访问和操作文档对象模型（DOM）。
在Vue项目中引入JQuery-ui插件的讲解
10-17
在Vue项目中引入JQuery-ui插件是前端开发中的一个实用技术点，它可以让我们在使用Vue框架的同时，利用JQuery-ui提供的丰富UI组件和功能。JQuery-ui是基于JQuery的用户界面库，它包括日期选择器、滑块、进度条等许多...
基于script标签引入vue.js
08-21
html页面基于script标签引入vue使用时，将此js放在项目路径中引用即可离线使用vue框架，避免在线引用网络延迟。 具体使用方法可参考我的博客
vue引入JQ的方法
alifj9932的博客
03-18 858
在vue中引入jq 用vue-cli脚手架工具构建项目成功后 当需要引入JQ，可用以下方法： 1.首先在package.json里的dependencies加入"jquery" : "^3.2.1"， 2.在终端里输入npm install jquery --save-dev当然用 淘宝镜像cnpm也是可以的 注意：jquery 一定要小写 不然会提...
vue中引入jq
qq_38143787的博客
05-07 1079
跟平常的引入是类似的，只是需要在配置文件中再加入一段。之前感觉很简单就没有写，但是用的时候总是要去搜一下，不如干脆自己记录一下，如下： 先安装 npm install jquery --save 在vue.config.js 文件中配置 因为vue-cli从3.0开始就没有config文件了，这里提供一个模板 var webpack = require('webpack') const path...
vue使用jqprint调打印机
前端程序猿的博客
11-24 1438
首先配置jquery 下面是教程Vue 中引入jquery - zhouj2019 - 博客园在vue2中引用jq，如下 1.安装jQuery 2.修改webpack的配置文件 文件目录及名称：build/webpack.base.conf.js 注释代码为修改部分 3、在组件中使用jquerhttps://www.cnblogs.com/zhoujuan/p/11713746.html 第二步下载jqprint包 jQuery打印插件jqprint一个通过单击页面按钮，便实现页面打印的jQuery插.
vue中如何引入jQuery和Bootstrap
11-27
在`main.js`文件中，引入jQuery： ```javascript import $ from 'jquery' ``` ### 二、引入Bootstrap CSS 1. **安装Bootstrap**： 安装Bootstrap库，可以使用以下命令： ``` npm install bootstrap --save ...
Vue引入jquery实现平滑滚动到指定位置
10-18
接下来，在Vue组件的`<script>`部分引入jQuery： ```javascript import $ from 'jquery'; export default { // ... }; ``` 现在我们可以在Vue组件中使用`$`符号来调用jQuery的功能。假设我们有一个导航菜单，当...
Vue项目中jQuery的引入
公众号@极客密码
05-07 773
1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require("webpack") 3.在module.exports的最后加入如下代码 plugins: [     new webpack.optimize.CommonsChunkPlugin('c...
jqprint打印js及兼容解决
10-30
网页打印：jquery.jqprint-0.3.js+jquery不兼容问题的解决办法。
利用jqprint插件打印页面内容的实现方法
10-18
qprint是一个基于jquery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，下面这篇文章主要给大家介绍了关于利用jqprint插件如何打印页面内容的实现方法，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
在vue中引入jQuery
大桶爆米花eee
11-07 280
一、在项目中安装jquery : npm i jqurey –save 二、修改webpack.base.conf.js文件 添加红框中的内容： const webpack = require('webpack') //在module.exports中添加如下 module.exports = { //其他代码... plugins: [ new webpack.Prov...
vue项目引入jquery库的方法
hsg77的专栏
05-26 7016
vue项目引入jquery库的方法 1首先在package.json里的dependencies加入jquery "dependencies": { "axios": "^0.19.2", "element-ui": "^2.13.1", "jquery": "^3.5.1", "ol": "^5.2.0", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.2.0", "xlsx":
Vue-CLI中引入jQuery并写一个轮播图
一只柠檬菜鸡
10-11 424
想在Vue-CLI项目中使用轮播图，轮播图的代码是根据自己需求作了修改的别人的代码，其中用到jQuery。 需求： 1.写出轮播图的代码 2.在Vue-CLI中引入jQuery 3.将轮播图的代码放入项目中封装为组件 1.将jq引入到vue-VLI中 A. 安装jQuery npm install jquery –save 安装成功后package.json显示：（应该是默认安装最新版本） B. 配置vue.config.js（框内新增） C. 在main.js中引入 import $ from 'j
Vue中引入jQuery两种方式可在vue中引入jQuery
飙歌的博客
10-09 8849
Vue中引入jQuery两种在vue中引入jQuery的方式
vue项目使用jq插件
最新发布
outsider76557的博客
10-23 3136
vue项目使用jq和jqui的情况在有的老项目升级可能会出现，这里主要举例vue2项目中使用jqui的排序、拖拽、放置、缩放等方法，解决配置页面拖拽新建内容等需求。
vue项目里用到打印功能
weixin_39418338的博客
05-11 632
1、print() 方法用于打印当前窗口的内容。 setTimeout(()=>{ //v-loading.fullscreen.lock="fullscreenLoading" 全屏加载 this.fullscreenLoading=false this.$nextTick(()=>{ window.print() }) },1000) } //页面所有的元素加载...
Vue Cli3.0 使用jquery
热门推荐
ai520587的博客
11-15 2万+
注意这里配置的是vue-cli3.0引入jquery的方法，不是vue-cli2.0的配置方法 一、安装jquery        npm install jquery --save 二、一般安装成功后在package.json文件内的dependencies项中会有"jquery": "^1.12.4"，如果没有可以手动添加。需要注意的是，现在我们都是直接使用模板创建项目的，所以第一步是可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值