Étapes pour installer jQuery dans Nuxt.js

Question

Bien que j'aie essayé d'ajouter jQuery dans mon projet, j'ai rencontré une erreur indiquant qu'il n'est pas défini.

plugins: [
    { src: '~/plugins/js/svgSprite.js', mode: 'client' },
    { src: '~/plugins/vendor/jquery/jquery.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap/js/bootstrap.bundle.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap-select/js/bootstrap-select.min.js', mode: 'client' }, <-- 给我报错
    { src: '~/plugins/vendor/magnific-popup/jquery.magnific-popup.min.js', mode: 'client' },
    { src: '~/plugins/vendor/smooth-scroll/smooth-scroll.polyfills.min.js', mode: 'client' },
    { src: '~/plugins/vendor/object-fit-images/ofi.min.js', mode: 'client' },
    { src: '~/plugins/js/theme.js', mode: 'client' }
  ],

Pourquoi cela se produit-il, j'ai évidemment déclaré jQuery avant bootstrap-select.

Answer 1

Je ne recommande pas d'ajouter jQuery aux projets Nuxt.

---

Mais si vous vraimentvoulez l'ajouter, vous pouvez suivre ces étapes :

• Installez-le en utilisant yarn add jquery
• Ajoutez ce qui suit à votre nuxt.config.jsfichier

import webpack from 'webpack'

export default {
  // ...
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  },
}

• Assurez-vous d'avoir le contenu suivant dans votre .eslintrc.jsfichier

module.exports = {
  // ...
  env: {
    // ...
    commonjs: true,
    jquery: true
  },
}

Ensuite, vous pouvez l'utiliser comme ceci method dans

ou similaire 🎜

$("h2").addClass("tasty-class")