Uncaught ReferenceError: $ n'est pas défini (VueJS)

Question

J'ai démarré un projet VueJS avec:

vue init webpack my-project

Et j'ai obtenu jQuery avec npm:

npm install jquery

Et j'ai mis cette ligne sur mon fichier main.js:

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

De toute façon, je ne peux pas utiliser ce morceau de code: (de l'interface utilisateur sémantique)

$('.ui.rating')
  .rating()
;

Parce que je reçois cette erreur:

Uncaught ReferenceError: $ is not defined

Une idée pourquoi cela se produit?

Answer 1

Si jQuery est installé via npm, importez-le simplement comme ceci:

import $ from 'jquery'

Et dans vos méthodes, vous pouvez commencer à utiliser $ comme:

methods: {
  getFoo() {
    $( "div.foo" ).html();
  }
}

Answer 2

Il vaut mieux garder votre code jQuery séparé du code Vue. Vous pouvez y parvenir en créant un fichier jQuery dans les ressources et en utilisant la fonction ECMAScriptexport et import.

 //your jQuery functions file e.g main.js
    import $ from 'jQuery' //import jQuery 

    export function somethingWithjQuery(){
     console.log($)
     }

Et à l'intérieur de votre composant Vue vous pouvez faire quelque chose comme ceci:

 import {somethingWithjQuery} from './assets/js/main'

    export default {
        name: 'app',
        components: {
            Hello
        },
        mounted() {
            somethingWithjQuery()
        }
    }