web-dev-qa-db-fra.com

Ajouter Jquery à Vue-Cli 3

J'essaie actuellement d'ajouter Jquery à mon vue-cli projet. Je suis conscient du mauvais comportement qu'il peut produire, mais de toute façon; Puisqu'il n'y a pas de build/webpack.base.conf.js plus j'ai essayé de modifier vue.config.js en ajoutant:

 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
    })
  }
   ...
 }

ou

const webpack = require('webpack')

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

Les deux options ne semblent pas fonctionner. Avec # 1, rien ne semble se produire, avec # 2 j'obtiens l'erreur de compilation; "plugins" n'est pas autorisé ou "ProviderPlugin" n'est pas résolu et lorsque j'essaie d'importer jQuery directement dans main.js et de définir l'opérateur $, jquery reste indéfini lorsque j'essaie de l'utiliser.

Un grand merci d'avance!

javascriptjqueryvue.jsvue-cli-3
9
nonNumericalFloat

Résolu en ajoutant à main.js

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

Cela l'a fait pour moi et jQuery est maintenant disponible dans le monde.

Une autre approche serait;

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

J'espère que cela aidera quelqu'un à trébucher sur le même problème à l'avenir. Si vous ne pouvez toujours pas le comprendre, vérifiez cette question ou jetez un œil à la documentation .

modifier: assurez-vous que vous avez exécuté npm install jquery.

17
nonNumericalFloat

# 2 Vous oubliez d'ajouter configureWebpack dans vue.config.js

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

Je l'ai fait en suivant les étapes:

installez d'abord jquery

npm install jquery --save-dev

dans n'importe quel composant ou vue:

<script>

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

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

ou comme réponse ci-dessus, les deux sont identiques:

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

maintenant vous pouvez utiliser n'importe où dans la page, pour une disponibilité globale, suivez simplement la réponse ci-dessus.

1
ArifMustafa