vue.jsでjqを使用する方法

vue.js で jq を使用する方法: まず、NPM 経由で jQuery をインストールします。コードは [npm install jquery --save] です。次に、webpack を構成します。コードは [var webpack = require('webpack') ]; 最後にeslintを確認します。

【おすすめ関連記事: vue.js】

vue.js は jq を使用します方法:

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 チェック

賢明な友人たちは、これが eslint に関連していると考えたに違いありません。はい、現時点で行う必要がある次のステップは、ルート ディレクトリ .eslintrc.js ファイルの、変更したファイルの module.exports に、env jquery: true のキーと値のペアを追加します。これで完了です。つまり、

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

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

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

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