VueでjQueryを使う方法

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

#このチュートリアルの動作環境: 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('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 を操作するコードを記述します

次に、 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 サイトの他の関連記事を参照してください。