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 をインポートします
Vue コンポーネントで $ または jQuery を使用して dom を操作するコードを記述します
次にプロジェクトを開始します
しかし、コンパイルでエラーが報告されました:
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 サイトの他の関連記事を参照してください。