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 :

Puis le fichier default/index.html.twig :

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.

2 commentaires

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.