vue3 プロジェクトで jQuery を簡単にインストール、構成、使用する方法

1. まず、ターミナルまたはコマンド ラインで pnpm を使用して jQuery をインストールします (npm、yarn パッケージ マネージャーも使用できます)。

   pnpm install jquery
   

2. たとえば jquery.ts/jquery.js、jQuery をインポートしてグローバルに登録するには、Vue 3 プロジェクトに別のファイルを作成します。

   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'推奨されないことに注意してください。