vue 配置jquery

最新推荐文章于 2024-06-20 08:57:02 发布
最新推荐文章于 2024-06-20 08:57:02 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： vue vue小白炼成记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chpswg/article/details/95969907
版权
本文介绍了如何在Vue项目中配置并使用jQuery。首先通过npm安装jQuery，然后在vue.config.js中添加webpack配置，利用ProvidePlugin全局提供jQuery和$。最后，在项目入口文件如main.js中导入jQuery，即可在页面中正常使用。
摘要由CSDN通过智能技术生成

1、安装jquery 依赖

npm install jquery –S

2、在配置文件vue.config.js中添加jquery 配置

在文件头部 添加定义

const webpack = require('webpack')

在配置中添加引用

configureWebpack: {

plugins: [

new webpack.ProvidePlugin({

jQuery: 'jquery',

$: 'jquery'

})

]

},

3、在项目的入口处添加导入（一般单页面为main.js，如果是多页面，则为每个需要使用jquery的页面的入口文件）

import $ from 'jquery' //引入jquery

4、页面中可以正常使用了

cici_cmh
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件中引入jQuery
m0_63174618的博客
04-12 2040
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
exam-vue-jquery2
04-17
标题“exam-vue-jquery2”暗示我们正在探讨一个与Vue.js和jQuery相关的项目或考试。这个项目可能涉及使用这两个库来构建Web应用程序，并且可能是为了测试开发者在实际开发环境中的技能和理解。 Vue.js是一个轻量级...
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
vue3项目中如何快速安装、配置并使用jQuery
夏日漱石的博客
09-13 2116
vue3项目中如何快速安装、配置并使用jQuery
深入解析ESLint配置：从入门到精通的全方位指南，精细调优你的代码质量保障工具
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-20 4340
ESLint是一个主流的JavaScript Lint工具，用于监测JavaScript代码质量，可以帮助开发者提升编码能力。它可以很容易地统一开发者的编程风格，同时也可以通过配置文件来自定义规则。在前端开发中，ESLint可以帮助我们检查代码中的潜在问题，提高代码的可读性和可维护性。
vue3+vite+ts项目使用jQuery
Joy_qxz的博客
10-25 1562
3、在需要的文件中引入。1、安装jQuery。
在vite中使用三方插件jquery/jqueryui/bootstrap/gojs等等
yanhappiness
12-16 4944
vite中引入jquery-ui等三方插件
在vue中配置jQuery环境
linan996的博客
10-22 7166
vue以及jQuery版本 使用的都既是当前最新的版本 一、如何配置？ 两种方法进行配置。 1.在main.js中进行配置 2.修改配置文件vue.config.js进行配置 （个人推荐第二种，配置完成即可全局使用，第一种有时候还会报错） 二、配置步骤 1.使用第一种main.js方法引入 代码如下（示例）： import $ from "jquery" Vue.use($); main.js完整代码如下 import Vue from "vue"; import App from "./App.vu
Vue安装配置JQuery
Tong_Zai_Yuan_Fang的博客
04-24 505
1.安装jquery npm install jquery --save-dev 2.build/webpack.base.conf.js中， 导入：var webpack = require(‘webpack’); 最下面添加： plugins: [ new webpack.ProvidePlugin({ $:“jquery”, jQuery:“jquery”, “window.jQuery”:...
Vue----Vue安装配置JQuery
qq_35874340的博客
06-02 435
方式一： 1.安装jquery npm install jquery --save-dev 2.build/webpack.base.conf.js中， 导入：var webpack = require('webpack'); 最下面添加： plugins: [ 　　new webpack.ProvidePlugin({ 　　　　$:"jquery", 　　　　jQuery:"jquery", 　　　　"window.jQuery":"jquery" 　　}) ]3.vue文件中无需导入，可直接使用$
Vue笔记——Vue组件中引入jQuery
fengzhen8023
10-14 8929
如果想在普通的HTML页面引入jQuer库的话，直接使用<script src="jQuery.js"></script>即可。但是如果要在Vue组件中使用jQuery库的话，使用这样的方式就不行了，需要使用以下方法 一、安装jQuery依赖 在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖： npm install jquery --save #...
vue和jQuery包.zip
07-17
6. **Vue Router路由管理**：Vue Router是官方的路由库，用于处理单页面应用（SPA）的页面跳转和路由配置。 jQuery的知识点包括： 1. **选择器**：jQuery提供了丰富的CSS选择器，使得选取DOM元素变得简单高效，如`...
vue中如何引入jQuery和Bootstrap
11-27
由于Vue项目通常使用Webpack进行打包，我们需要配置Webpack来使jQuery全局可用。打开`webpack.base.conf.js`文件（位于`build`文件夹下），进行以下修改： - 引入Webpack模块：`var webpack = require('webpack');...
如何在vue 中引入使用jquery
01-22
1.首先在配置文件中添加 cnpm install 下载jquery文件 2.在webpack配置文件中添加下面代码 ...以上就是如何在vue 中引入使用jquery的详细内容，更多关于vue 引入使用jquery的资料请关注软件开发网其它相关文章！
Vue引入jquery实现平滑滚动到指定位置
10-18
安装完成后，我们需要对Vue项目的webpack配置进行修改，以便能够在Vue组件中使用jQuery。打开`build/webpack.base.conf.js`文件，在`externals`对象中添加jQuery： ```javascript module.exports = { // ... ...
vue安装配置jquery
gyueh的博客
12-26 1548
找到项目所在文件夹-------npm install --save jquery 在build/webpack.base.conf.js文件中, 导入：const webpack = require(“webpack”) 在module.exports的最后加入这行代码 plugins: [ 　　new webpack.ProvidePlugin({ 　　　　$:"jquery", 　　　　...
vue添加jQuery
f2634825250的博客
06-14 469
1.终端输入依赖 npm install jquery –save-dev 2.如图 var webpack = require("webpack") plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ], 3.在main.js里面引用 import $ from 'jquery'
vue-cli3 中引入 Jquery vue中配置Jquery
weixin_42084225的博客
11-07 536
1. 安装jquery npm install jquery --save 或 在package.json中指定版本号，然后运行npm install命令 "dependencies": { "jquery": "^3.4.1" } npm install 2. 配置vue.config.js 在 vue.config.js 中 const webpack = require('w...
Vue 中使用 jQuery的配置方法
大赚万万亿
06-06 558
https://www.jb51.net/article/115161.htm 里面提到了eslint https://www.cnblogs.com/Yann001/p/6850698.html
vue引用jquery
12-13
要在Vue项目中使用jQuery，可以按照以下步骤进行操作： 1. 安装jQuery：在终端中运行命令`npm install jquery --save`，将jQuery安装到项目中。 2. 在Vue组件中引入jQuery：在需要使用jQuery的Vue组件中，可以使用`import $ from 'jquery'`语句引入jQuery。 3. 在webpack配置文件中添加ProvidePlugin插件：在webpack配置文件中，添加以下代码： ```javascript const webpack = require('webpack') module.exports = { // ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) ] } ``` 这样就可以在所有的Vue组件中使用`$`符号来代替jQuery了。 另外，如果你想在普通的HTML文件中使用jQuery，可以按照以下步骤进行操作： 1. 下载jQuery：在jQuery官网上下载jQuery文件，并将其保存到项目中。 2. 在HTML文件中引入jQuery：在HTML文件中使用`<script>`标签引入jQuery文件。 ```html <script src="path/to/jquery.js"></script> ``` 3. 在JavaScript文件中使用jQuery：在JavaScript文件中使用`$`符号来代替jQuery即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值