So installieren, konfigurieren und verwenden Sie jQuery schnell im Vue3-Projekt

1. Installieren Sie zunächst jQuery mit pnpm im Terminal oder in der Befehlszeile: (npm, Garnpaketmanager können ebenfalls verwendet werden)

   pnpm install jquery
   

2. Erstellen Sie beispielsweise eine separate Datei in Ihrem Vue 3-Projekt,  jquery.ts/jquery.jsum jQuery zu importieren und global zu registrieren:

   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. Fügen Sie diese Datei in die Haupteintragsdatei ein (normalerweise  main.ts) und  app.use() registrieren Sie das jQuery-Plug-in mit der folgenden Methode:

   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. Jetzt können Sie in Ihrem gesamten Projekt   auf jQuery-Objekte zugreifen über $ : jQuery

5. // 其他组件中
   export default {
     mounted() {
       this.$('#myElement').addClass('highlight')
     }
   }
   

   Bitte beachten Sie, dass Vite das globale ProvidePlugin nicht mehr wie die Vue-CLI konfigurieren muss und aufgrund der unterschiedlichen Modulauflösungsmethode von Vite die direkte Verwendung in Vue 3 import $ from 'jquery'nicht empfohlen wird.