vue3项目中如何快速安装、配置并使用jQuery

  1. 首先,在终端或命令行中使用 pnpm 安装 jQuery:(npm,yarn包管理器也可以)
    pnpm install jquery
    
  2. 在你的 Vue 3 项目中创建一个单独的文件,例如 jquery.ts/jquery.js,用于导入和全局注册 jQuery:
    import { App } from 'vue'
    import jQuery from 'jquery'
    
    export default {
      install: (app: App) => {
        app.config.globalProperties.$ = jQuery
        app.config.globalProperties.jQuery = jQuery
        app.provide('jQuery', jQuery)
      }
    }
    
  3. 在主入口文件(通常是 main.ts)中引入该文件,并使用 app.use() 方法注册 jQuery 插件:
    import { createApp } from 'vue'
    import App from './App.vue'
    import jQueryPlugin from './jquery.ts'
    
    const app = createApp(App)
    
    app.use(jQueryPlugin)
    
    app.mount('#app')
    
  4. 现在你就可以在整个项目中通过 $ 或 jQuery 访问 jQuery 对象了:
  5. // 其他组件中
    export default {
      mounted() {
        this.$('#myElement').addClass('highlight')
      }
    }
    

    请注意,Vite 不再需要像 Vue CLI 一样配置全局的 ProvidePlugin,并且由于 Vite 的模块解析方式不同,直接在 Vue 3 中使用 import $ from 'jquery' 是不推荐的。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值