ホームページ > 記事 > ウェブフロントエンド > VueでjQueryを使う方法
#このチュートリアルの動作環境: Windows7 システム、Vue2.9.6&&jquery3.2.1 バージョン、DELL G3 コンピューター。 【おすすめ関連記事:vue で jquery を使用する方法: まず、NPM を使用して jQuery をインストールし、プロジェクトのルート ディレクトリで関連するコードを実行します。次に、webpack を構成します (コードは [var webpack = require('webpack')])。
vue.js】
vue で jquery を使う方法:
1. NPM で jQuery をインストールし、プロジェクト ルート ディレクトリで次のコードを実行します。
npm install jquery --save
2. Webpack 構成
は、次のビルド ディレクトリにあります。プロジェクトのルート ディレクトリ webpack.base.conf.js ファイルを見つけて、最初に次のコードを使用して webpack を導入します。このファイルはデフォルトでは参照されないためです。var webpack = require('webpack')次に、 module.exports にコードを追加します。
// 原有代码 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, // 添加代码 plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery" }) ], // 原有代码 module: { rules: [ // ...... ] }次に、他の多くのソリューションでは、それを main.js にインポートするだけで十分であると言っていますが、質問者はそうしました。 main.js に jQuery をインポートします
import 'jquery'Vue コンポーネントで
$ または jQuery を使用して、dom を操作するコードを記述します
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 サイトの他の関連記事を参照してください。