Vue で jQuery を使用する方法のチュートリアル

本文主要和大家分享Vue 中使用 jQuery的方法教程，编译报错：
$ is undefined or no-undef '$' is not defined
，
假设你已经使用vue-cli搭建好了开发的脚手架，接下来如下：

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

npm install jquery --save

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にインポートするだけで十分であると言っていますが、質問者はそれをやった 。 jQuery を main.js にインポートします:

import 'jquery'

Vue コンポーネントで $ または jQuery を使用して、dom を操作するコードを記述します。次に、プロジェクトを開始します:

npm run dev

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

http://eslint.org/docs/rules/no-undef '$' is not defined orhttp://eslint.org/docs/rules/no-undef 'jQuery' is not defined

何が起こっているのですか? ? ?

eslint チェック

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

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

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

関連する推奨事項:

vue コンポーネントの 3 つの記述形式の詳細な説明

vue の詳細な説明 vux コード メソッドの追加

Vue 2.5 の TypeScript の改善点

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