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.

4 commentaires

  1. Salut,
    Je commente plusieurs mois plus tard !
    Cependant j’ai une question assez technique.
    La ici cette appliweb n’est pas seo frendly.
    Du coup si je souhaite la rendre seo frendly quelles sont mes possibilités ?

    Utilisez v8js ( c’est pas très stable et il faut en plus bidouiller le serveur)

    Ou je pensez à utiliser symfony comme API et découplé vueJs pour l’utiliser avec nuxt.js et faire du SSR.

    Par comment déployer ça sur serveur de prod?
    Car ici ce n’est pas du statique donc il faut forcément un serveur node pour la partie vue?

    Je suis assez perdu sur cette partie et je ne trouve que des cas de sites statiques avec nuxt donc pas beaucoup d’infos sur Google

    Peux être as tu une réponse?

Répondre à Anthony Annuler la réponse

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.