Vue3.0引入Jquery

Vue3.0引入Jquery的方法
最新推荐文章于 2023-05-26 14:04:18 发布
原创 最新推荐文章于 2023-05-26 14:04:18 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #jquery

本文介绍了在Vue3.0中引入Jquery的具体步骤，包括停掉vue服务，在main.js添加语句，输入下载指令，若下载失败可使用提供的jquery包解压到node_modules里，在package.json和vue.config.js中添加相应内容，最后启动vue服务即可使用jquery。

Vue3.0引入Jquery

停掉vue服务
1、找到main.js加上一句话：import $ from 'jquery'
2、

  • 输入下载指令：jquery npm install jquery --save-dev
  • 为了避免小伙伴因为某些原因下载失败，我提供一个jquery的包，只要解压放到node_modules里就行

3、找到package.json，在"dependencies"下加入一句话"jquery":"^2.2.1",
4、找到vue.config.js,在里面加入一句话：const webpack = require('webpack')。
然后找到configureWebpack，在大括号里面加入代码
plugins:[new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery"})]
如果没有configureWebpack，可以找到module.exports,在里面写configureWebpack :{plugins:[new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery"})]}
启动vue服务，jquery就能用啦！

链接： https://pan.baidu.com/s/1sVAJAonDZc8fQU51i-Oj3Q
提取码： jicl
二维码：
在这里插入图片描述

Vue3.0中如何引入jQuery并使用
祈澈菇凉
12-01 2284
在使用vue框架开发的时候 ，是非常的方便的，但是在工作中 ，还是会有遇到对接jq的部分的接口，这个时候就需要在vue的界面里面引入jQuery并使用了 1：在项目里面安装 npm install jquery --save 2:在项目里面找到.eslintrc.js文件打开并进行配置 我们在env中配置 jQuery：true 3.打开项目的根目录vue.config.js文...
Vue-cli3 + jQuery
qq_43186285的博客
01-04 175
1.安装 npm install jquery --save 2.引入 新建vue.config.js 文件 const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jqu
vue3中引入jquery
坚持原创
04-02 6746
cnpm i --save jquery@1.* 在跟目录下创建vue.config.js文件，内容如下： const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ ...
vue-cli3.0中引入jquery
风里有诗句哈的博客
08-14 310
先在package.json中锁定版本,然后npm i 安装 "dependencies": { "core-js": "^2.6.5", "vue": "^2.6.10", "vue-router": "^3.0.3", "vue-wechat-title": "^2.0.5", "vuex": "^3.0.1", "jquery": "2...
vue3.0+typescript集成jquery、bootstrap、jquery.dataTable插件、echart
10-31
vue3.0+typescript通过npm管理包，然后导入ts中进行集成jquery、bootstrap、jquery.dataTable插件、echart，具体界面请看：https://blog.csdn.net/sunxiaoju/article/details/109401288
Vue CLI3.0中使用jQuery和Bootstrap的方法
10-17
在了解如何在Vue CLI 3.0中整合jQuery和Bootstrap之前，首先要明确Vue CLI是一个基于Vue.js进行快速开发的完整系统，用于管理项目的搭建、配置和开发流程。而Bootstrap是流行的前端框架，而jQuery是一个快速、小巧、...
VUE3.0,DAY63，Vue路由传参、路由命名、params参数、props配置
疯子的梦想@的博客
09-24 1456
VUE3.0,DAY63案例准备传递参数路由命名params参数props配置 案例准备 接上一篇案例，我们准备了两个类似按钮的东西，About和Home，点击Home又弹出News和Message。现在我们需要在点击Message下的信息，在弹出详情信息。 追加新建一个Detail.vue，里边代码如下： <template> <ul> <li>消息编号：</li> <li>消息标题：</li> </ul
vue3知识点5.33 vuecli3.0中和vuecli4.5中jquery和bootstrap的引入和使用（亲测有效）
yangyangdt的博客
01-02 900
vuecli3和vuecli4.5中jquery和bootstrap的引入和使用的不同之处。
vue3配置全局jquery
卑微牛马学习笔记
05-26 1596
vue3配置全局jquery
Vue3中引入jquery
weixin_43977647的博客
03-22 4820
vue3中引入jquery 由于我用vue创建项目之后并没有出现build文件夹，应该是vue3之后简化了，看了网上的一些教程都是要修改build文件下面的webpack文件，但是我没有找到 就想到一个方法，个人拙见，在main.js的文件中插入 import $ from 'jquery' Vue.prototype.JQ = $ 然后在需要用到的地方使用this.JQ来调用 mo...
vue3导入jQuery
weixin_57534872的博客
04-28 1454
一、安装jQuery npm install jquery --save //安装jQuery 二、配置jQuery configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jquery: "jquery", jQuery: "jquery", "windows.jQuery": "jquery", }),
vue-cli 3.0引入jquery
weixin_34235135的博客
05-19 361
2019独角兽企业重金招聘Python工程师标准>>> ...
【vue3】如何引入jQuery？
栀妹儿的炼丹炉
06-23 1545
1、终端安装依赖 npm install jquery --save 2、vue.config.js中添加以下（同webpack.base.conf.js文件） var webpack = require('webpack') ... module.exports = { ... plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "win
vue3.x项目中使用jquery（最简单的方式）
卫可冬的博客
09-09 8214
因为最近的项目需求，要把vue从2.x升级到3.x。项目中用到了jquery，网上搜索出来的使用方法都是vue2.x的方式：修改webpack.base.conf.js文件，或者修改vue.config.js。然而vue3.x的版本中根本就没有这两个文件。这种方式已经不再适用了。没必要再去新建一个文件。 具体的引入方式如下： 安装jquery npm install jquery -S 在项目的main.js中声明 const $ = require('jquery'); window.$ = $
Vue3引入JQuery
java_for的博客
05-06 3169
1.npm引入JQuery： npm install --save jquery@1.* 2.npm引入社区提供的申明文件： npm install @types/jquery --save-dev 3.vue.config.js配置插件： const webpack=require('webpack'); configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jque.
vue-cli3.0如何引入jquery
请叫我李先生
11-01 9213
const webpack = require('webpack') const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) } module.exports = { baseUrl: './', devServer: { host: '...
vue3.0引入JQ 配置设置；
The limits of your knowledge are the limits of your world
11-16 679
vue3.0引入JQ 配置设置；1. 安装；2. vue.config.js 配置webpack； 1. 安装； npm install jquery --save 2. vue.config.js 配置webpack； const webpack = require('webpack') module.exports = { configureWebpack: { name: name, resolve: { alias: { '@': resolv
Vue3引入jquery
qq_42724333的博客
12-05 1051
vue项目中引入jquery
Vue3.0与TypeScript整合前端库及图表插件指南
在Vue项目中，要使用这个插件，首先需要确保jQuery已被正确引入，然后引入jquery.dataTable的CSS和JS文件，并按照插件的文档进行相应的初始化配置。 ### ECharts ECharts是一个使用JavaScript编写的开源可视化库，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值