vue-cli webpack に jquery を導入する方法 (詳細なチュートリアル)

vue-cli で生成されたプロジェクトに jquery を導入するために webpack テンプレートを使用します。まず、package.json の依存関係に「jquery」:「^2.2.3」を追加してからインストールします。詳しくは、この記事を参照してください。 .

今日は午後から頑張って、やっとvue-cliで生成したプロジェクトにjqueryを導入して記録しました。 (テンプレート用の webpack)

まず package.json の依存関係に "jquery" : "^2.2.3" を追加し、次にインストール

webpack.base.conf.js の module.exports に

var webpack = require("webpack")

を追加します 最後に

を追加します

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

してから、必ずdevを再度実行してください

main.jsに導入するだけでOKですimport $ from 'jquery'

vueにjqueryを導入する方法を見てみましょう

1. npm install jquery

npminstall jquery --save

2. build/webpack.base.conf.js

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery:"jquery",
$:"jquery"
 })]

3. jquery

import $ from 'jquery'

を導入します

4. eslint を main.js に導入します

次のステップは、module.exports の .eslintrc.js ファイルを変更することです。変更したファイルのキーと値のペア jquery: true を env に追加するだけです。上記は私がまとめたものであり、将来的には誰にとっても役立つことを願っています。

関連記事:

Webpackのホットデプロイメントでファイルの変更が検出されない問題を解決する

webpack-dev-serverにページの自動更新を実装する

jqueryテクノロジーを使用して虫眼鏡を実装する

使用方法Puppeteer 画像認識テクノロジーにより Baidu インデックス クローラーが実装されました

以上がvue-cli webpack に jquery を導入する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。