vueでjqueryパッケージを呼び出す方法-Vue.js-php.cn

vueでjqueryパッケージを呼び出す方法

coldplay.xixi

リリース： 2023-01-13 00:44:58

オリジナル

4581 人が閲覧しました

vue が jquery パッケージを呼び出す方法: 最初に jQuery パッケージを参照してプロジェクトフォルダーに入り、次に jQuery パッケージをインストールし、スキャフォールディングビルドフォルダーを見つけて関連するコードを追加します。最後に jquery を参照してポップに表示します。アップウィンドウ。

vueでjqueryパッケージを呼び出す方法

#このチュートリアルの動作環境: Windows7 システム、jquery3.2.1&&Vue2.9.6 バージョン、DELL G3 コンピューター。

【おすすめ関連記事:

vue.js】

vue が jquery パッケージを呼び出す方法:

1 つステップ

package.jsonの依存関係に行を追加します

"jquery" : "^3.2.1"

ログイン後にコピー

jQueryパッケージを参照します

vueでjqueryパッケージを呼び出す方法 ##2番目のステップ

cd プロジェクト名を入力します

プロジェクトフォルダーに入力します

実行

npm install jquery --save-dev

ログイン後にコピー

jQuery パッケージをインストールします

vueでjqueryパッケージを呼び出す方法 3 番目のステップ

スキャフォールディングビルドフォルダーの下で webpack.base.conf.js ファイルを見つけます

#先頭に次の行を追加します:

var webpack=require(&#39;webpack&#39;)

ログイン後にコピー

ステップ4 vueでjqueryパッケージを呼び出す方法

スキャフォールディングビルドフォルダーで webpack.base.conf.js ファイルを見つけます

module.exports にプラグインを追加します:

[          
new webpack.ProvidePlugin({                
$:"jquery",                
jQuery:"jquery",               
"windows.jQuery":"jquery"      
}) ],

ログイン後にコピー

ステップ 5 vueでjqueryパッケージを呼び出す方法

プロジェクトのエントリファイルの main.js に行を追加します

import $ from &#39;jquery&#39;

ログイン後にコピー

Reference jquery

6 つのステップ vueでjqueryパッケージを呼び出す方法

テストコンポーネントの場合 HelloWorld.vue

HTML コードを追加

<h1 id="test">Test Jquery</h1>

ログイン後にコピー

JS コードを追加

$(&#39;#test&#39;).click(function(){    alert(&#39;Test Jquery Success!&#39;);});

ログイン後にコピー

# #ステップ 7

vueでjqueryパッケージを呼び出す方法 npm dev を実行してコンパイルし、ブラウザに 127.0.0.1:8080 と入力します。

ページにアクセスして [Test Jquery] をクリックします。

ポップアップウィンドウに [Test Jquery] が表示される場合成功!

は、JQuery が正常に参照されたことを示します

vueでjqueryパッケージを呼び出す方法関連する無料学習の推奨事項:

javascript ＃＃＃＃＃＃＃＃＃（ビデオ）＃＃＃＃＃＃＃＃＃

以上がvueでjqueryパッケージを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。