VueでjQueryを使う方法-Vue.js-php.cn

VueでjQueryを使う方法

coldplay.xixi

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

オリジナル

8050 人が閲覧しました

vue で jquery を使用する方法: まず、NPM を使用して jQuery をインストールし、プロジェクトのルートディレクトリで関連するコードを実行します。次に、webpack を構成します (コードは [var webpack = require('webpack')])。

VueでjQueryを使う方法

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

【おすすめ関連記事:

vue.js】

vue で jquery を使う方法:

1. NPM で jQuery をインストールし、プロジェクトルートディレクトリで次のコードを実行します。

npm install jquery --save

ログイン後にコピー

2. Webpack 構成

は、次のビルドディレクトリにあります。プロジェクトのルートディレクトリ webpack.base.conf.js ファイルを見つけて、最初に次のコードを使用して webpack を導入します。このファイルはデフォルトでは参照されないためです。

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

ログイン後にコピー

次に、 module.exports にコードを追加します。

// 原有代码
resolve: {
 extensions: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;],
 alias: {
&#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39;,
&#39;@&#39;: resolve(&#39;src&#39;)
 }
},
// 添加代码
plugins: [
 new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
 })
],
// 原有代码
module: {
 rules: [
// ......
 ]
}

ログイン後にコピー

次に、他の多くのソリューションでは、それを main.js にインポートするだけで十分であると言っていますが、質問者はそうしました。

main.js に jQuery をインポートします

import &#39;jquery&#39;

ログイン後にコピー

Vue コンポーネントで

$ または jQuery を使用して、dom を操作するコードを記述します

次に、 project

npm run dev

ログイン後にコピー

しかし、コンパイルでエラーが報告されました:

http://eslint.org/docs/rules/no-undef '$' が定義されていない、または
http: //eslint.org/docs/rules/no-undef 'jQuery' が定義されていません

何が起こっているのでしょうか? ? ?

3.eslint check

賢い友人なら、これが eslint に関連していると考えたはずです。はい、現時点で行う必要がある次のステップは、を変更することです。ルートディレクトリの eslintrc.js ファイルの、変更したファイルの

module.exports に、env のキーと値のペア jquery: true、つまり:

env: {
 // 原有
 browser: true,
 // 添加
 jquery: true
}

ログイン後にコピー

again## を追加します。 #npm run dev

、OK、エラーは報告されませんでした。すぐにコンポーネントに移動して試してみます。console.log($('selector')) を実行すると、jQuery を使用して DOM が正常に取得されたことがわかります。

関連する無料学習の推奨事項:
javascript(ビデオ)

以上がVueでjQueryを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。