web-dev-qa-db-ja.com

JqueryをVue-Cli 3に追加

現在、Jqueryをvue-cliプロジェクトに追加しようとしています。私はそれが生み出す可能性のある誤動作を知っていますが、とにかく; build/webpack.base.conf.jsはもうないので、以下を追加してvue.config.jsを編集してみました。

 module.exports {
    ...
    chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      definitions[0] = Object.assign(definitions[0], {
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery',
        _: 'lodash'
      })
      return definitions
    })
  }
   ...
 }

または

const webpack = require('webpack')

module.exports {
   ...
 plugins: [
  new webpack.ProvidePlugin({
     $: 'jquery',
     jquery: 'jquery',
     'window.jQuery': 'jquery',
     jQuery: 'jquery'
   })
  ]
   ...
 }

どちらのオプションも機能していないようです。 ＃1では何も起こらないようですが、＃2ではコンパイルエラーが発生します。 「プラグイン」が許可されていないか、「ProvidePlugin」が未解決であり、main.jsにjQueryを直接インポートして$演算子を定義しようとすると、jqueryを使用しようとすると未定義のままになります。

よろしくお願いします！

javascriptjqueryvue.jsvue-cli-3
9
nonNumericalFloat

main.jsに追加して解決しました

window.$ = window.jQuery = require('jquery');

それは私のためにそれをしました、そしてjQueryは現在利用可能ですglobally。

別のアプローチは、

Vue.use({
install: function(Vue, options){
    Vue.prototype.$jQuery = require('jquery'); // you'll have this.$jQuery anywhere in your vue project
    }
});

これが将来同じ問題に遭遇する誰かの助けになることを願っています。それでもわからない場合は、 この質問 を確認するか、 ドキュメント を参照してください。

edit：npm install jqueryを実行したことを確認してください。

17
nonNumericalFloat

＃2 configureWebpackをvue.config.jsに追加するのを忘れた

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}
9
Rdzawobrody

私は次の手順でそれをしました：

最初にjqueryをインストールする

npm install jquery --save-dev

任意のコンポーネントまたはビュー：

<script>

import jQuery from "jquery";
const $ = jQuery;
window.$ = $;

....
....
....

または上記の回答と同じように、両方とも同じです：

window.$ = window.jQuery = require("jquery");

ページのどこでも使用できるようになりました。グローバルに利用するには、上記の回答に従うだけです。

1
ArifMustafa