在vue中使用 jquery 的两种方法

11 篇文章 0 订阅
1 篇文章 0 订阅

方法一:

  1. 直接在vue项目的index.html中引入 外部链接即可
#index.html文件中
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

不推荐:因为引入外部链接或者引入下载好的js文件这种方式不参与打包,需要下载到本地的jquery文件引入才可
方法二
安装依赖包

npm i jquery --save-d

全局引入

# 在src/main.js文件
import jquery from 'jquery'
Vue.prototype.$ = jquery

局部引入

#在需要的组件中
import $ from 'jquery'
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue添加jQuery方法有很多种,这里介绍其两种比较常见的方法方法1:通过CDN引入jQueryVueHTML文件引入jQuery的CDN链接即可。例如,我们可以在`index.html`文件添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Vue App</title> </head> <body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="./main.js"></script> </body> </html> ``` 上面的代码,我们引入VuejQuery的CDN链接,然后在`main.js`就可以使用jQuery了。 方法2:通过npm安装jQueryVue项目安装jQuery,可以使用npm命令进行安装。在终端进入Vue项目所在的目录,然后执行以下命令: ``` npm install jquery --save ``` 安装完成后,在Vue的JavaScript文件就可以使用jQuery了。例如,在`main.js`文件添加以下代码: ```javascript import $ from 'jquery' Vue.prototype.$ = $ ``` 上面的代码,我们使用了ES6的模块化语法来引入jQuery,然后将其挂载到Vue的原型对象上。这样,在Vue的组件就可以使用`$`符号来访问jQuery了。 需要注意的是,如果你使用Vue CLI 3.x来创建Vue项目,在安装jQuery后还需要在`vue.config.js`文件添加以下配置: ```javascript module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] } } ``` 这样才能确保Webpack正确地将jQuery打包到项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RxnNing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值