Appli de gestion de mot de passe en Symfony et Vue.js (Partie 2)

Suite de notre développement !

Dans le chapitre précédent on a pu mettre en place tout notre environnement ainsi que notre première page.

Cet article est écrit en 3 parties :

Vous pouvez retrouver le projet complet ici : https://github.com/gponty/gespassvuejs

Comme convenu on va maintenant configurer vue.js en créant un fichier webpack.config.js à la racine :

Il faut aussi créer quelques répertoires où stocker nos fichiers css et js :

/assets/css
/assets/js

On va créer notre fichier scss, qui va juste se contenter d’appeler la librairie Bootstrap :

On va faire un peu de joli et remplacer le fichier par défaut de notre “base” html (“/templates/base.html.twig”) :

Si vous relancez la page vous allez voir quelque chose de pas beau du tout :

C’est que tout simplement on a pas compilé le fichier scss, pour ça rien de plus simple il suffit de lancer :

Vous devriez avoir une erreur qui dit que le fichier app.js n’existe pas, c’est normal on le créera plus tard.

La page est un peu plus belle :

On va maintenant créer nos fichiers vue.js, d’abord le fichier /assets/js/app.js :

Si vous relancez

A ce stade du développement plus rien ne fonctionne car il manque encore pas mal de fichiers à développer.

Comme par exemple le fichier component vue.js : (/assets/js/components/motdepasseComponent.vue)

Il ne faut pas oublier de relancer la compilation des assets, et à partir de maintenant vous pouvez le laisser tourner en tâche de fond, à chaque modif dans un fichier scss ou js, ça se recompilera automatiquement sans que vous n’ayez rien à faire.

Pour tester que tout notre process fonctionne il suffit d’ajouter un mot de passe à la main dans la base de données, et voici ce que ça nous donne :

Pas mal n’est ce pas ? Dans le prochain chapitre on traitera l’ajout et la modif des mots de passe.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.