vue.js は jquery をサポートしていますか?

vue.js は jquery をサポートします。 Vue で jquery を使用する方法: 最初に「npm install jquery --save」を使用してインストールし、次に webpack を構成し、jquery を main.js にインポートし、最後に必要なコンポーネントで jquery コードを使用します。

#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

vue-cli を使用して開発スキャフォールディングを構築したと仮定して、次に以下を見てください。

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

npm install jquery --save

2. Webpack 構成

プロジェクト ルートのビルド ディレクトリで webpack.base を見つけますこのファイルはデフォルトでは参照されないため、最初に次のコードを使用して 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 チェック

賢い友人なら、これは eslint に関連していると考えたはずです。はい、現時点で行う必要がある次のステップは、.eslintrc.js ファイルを変更することです。変更後、ファイルの module.exports にキーと値のペア jquery: true for env を追加するだけです:

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

npm run dev again、OK、エラーは報告されません。急いで、component. console.log($('selector')) で試してみると、jQuery を使用して DOM を取得できたことがわかります。

プログラミング関連の知識について詳しくは、

プログラミング ビデオ コースをご覧ください。 ！

以上がvue.js は jquery をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。