jq と vuejs を混在させることはできますか?

jq と vuejs は混合可能です。方法: 1. npm ツールを使用して jquery をインストールします。2. 「webpack.base.conf.js」ファイルと「module.exports」ファイルを設定します。3. 「main. js」の場合、「import 'jquery'」を使用してjqを導入します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue.js について考えるとき、vue-cli スキャフォールディングを使用してプロジェクトを構築することを自動的に考えることがあります。ただし、ビジネス シナリオが vue-cli スキャフォールディングの使用に適していない場合があります。これは、vue jquery を使用する場合に発生します。それぞれの利点を組み合わせて使用​​すると、開発効率が大幅に向上します。

vue プロジェクトで jquery を使用する方法

1. jquery をインストールします。

プロジェクトのルート ディレクトリを入力して実行します: npm install jquery --save

プロジェクトの package.json に依存関係情報が自動的に追加されます

2. webpack の構成

プロジェクトのビルド ディレクトリで webpack.base.conf.js ファイルを見つけて、次のように導入します: var webpack = require('webpack')

次にモジュールにコードを追加します。エクスポートに

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

3 を追加します。プロジェクトの main.js を見つけて、次のコードを追加します: import 'jquery'

次のように使用しますnpm run dev プロジェクトを再実行します

テスト、個人テストは成功しました

<el-row id="form">....
jqueryTest(){
 console.log($("form"))
}

関連する推奨事項: 「vue.js チュートリアル#」 ##"

以上がjq と vuejs を混在させることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。