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' 是不推荐的。

猜你喜欢

转载自blog.csdn.net/qq_62799214/article/details/132845614
今日推荐