Partage
  • Partager sur Facebook
  • Partager sur Twitter

[VueJs] bonnes pratiques avec Webpack Encore ?

    12 juin 2019 à 16:24:55

    Salut à tous,

    dans le but de remplacer jQuery, je tente de mettre en place vue.js dans un projet Symfony 4.2 avec Webpack Encore. Le début n'est pas bien compliqué car il suffit d'ajouter une ligne dans le fichier webpack.config.js

    .enableVueLoader()

    En revanche je ne suis pas certain que l'organisation des fichiers que j'avais jusqu'à présente est bonne car je n'arrive pas a faire fonctionner les composants... Dans webpack.config, je déclare les différents fichiers spécifiques aux pages ainsi que le fichier global main.js.

    .addEntry('main', './assets/js/main.js')
    .addEntry('home', './assets/js/home.js')
    .addEntry('contact', './assets/js/contact.js')

    Ce dernier (contrairement aux autres) doit inclure le code des fichiers mis dans le sous-dossier main. D'ailleurs chacun des fichiers du dossier racine js inclue un fichier scss comme le permet Webpack. Dans le cas d'un fichier dédié à une page, je n'inclue aucun fichier js et met directement le code nécessaire à cet endroit. Dans le cas du main.js, j'inclue tous les fichiers nécessaires, séparés par utilisation (nabar, footer, etc...) :

    /***** CSS *****/
    require('../scss/main.scss');
    
    /***** JS *****/
    require('@fortawesome/fontawesome-free/js/all.js');
    require('./main/navbar.js');

    Et voici donc un exemple de fichier qui est inclue :

    import Vue from "vue";
    Vue.options.delimiters = ['${', '}'];
    
    var navbarMenu = new Vue({
        el: '#navbar',
        data: {
            isActive: false
        },
        computed: {
            classNavbarMenu: function () {
                return {
                    'is-active': this.isActive
                }
            }
        },
        methods: {
            toggleNavbarMenu: function() {
                this.isActive = !this.isActive;
            }
        }
    });

    Je me posait donc 2 questions, comment faire pour déclarer globalement Vue afin de ne pas devoir redéfinir les delimiters que je suis obligé de changer à cause de twig ? Le mieux serait de n'avoir qu'une seule déclaration, mais sinon au moins une déclaration globale pour le main (et non dans chaque fichier inclue).  Et l'autre question, avez vous des recommandations quant à l'organisation des fichiers ? J'ai l'impression qu'elle est quelque peu problématique pour vue avec lequel je ne peux par exemple pas interagir depuis la console de mon navigateur...

    Je vous remercie d'avance pour le temps que vous prendrez à me répondre.
    Bonne journée.

    -
    Edité par Radiax18 12 juin 2019 à 16:26:39

    • Partager sur Facebook
    • Partager sur Twitter

    </radiax>

      18 juin 2019 à 9:42:49

      Personne n'utilise VueJS ? Je n'ai toujours pas trouvé la réponse à mon problème.
      • Partager sur Facebook
      • Partager sur Twitter

      </radiax>

      [VueJs] bonnes pratiques avec Webpack Encore ?

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      • Editeur
      • Markdown