Tutoriel pour développer une application web avec Vue.js et Vue CLI : mise en œuvre des concepts via un exemple (partie 2)

04 July 2019 - less than 1 min read time
Tags: Vue.js

Je viens de finaliser l’écriture d’un tutoriel consacré framework web JavaScript Vue.js. Il sera publié en trois parties :

• généralités sur les frameworks web JavaScript et présentation de Vue.js ;
• mise en œuvre des concepts de Vue.js ;
• déploiement d’une application web développée avec Vue.js.

Cette deuxième partie présente les principaux concepts de Vue.js au travers d’un exemple complet :

• présentation de l’exemple PollDLE qui servira de fil rouge ;
• création du squelette du projet PollDLE avec Vue.js et Vue CLI ;
• initialisation des modèles et des vues pour les différents composants ;
• mise en place des bindings entre les modèles et les vues via l’utilisation du templating (interpolation et les directives) ;
• utilisation des propriétés calculées (computed) et des observateurs (watch) ;
• détail du fonctionnement d’un composant pour savoir développer, instancier et dialoguer avec un composant ;
• invocation d’un service web Rest pour modifier ou retourner la valeur d’un modèle ;
• paramétrage du système de routage pour les changements de valeurs d’URL.

L’exemple est appelé PollDLE qui est une application pour créer et soumettre des sondages. PollDLE ~= Poll + la dernière partie de Doo DLE (Doodle est une application de planification de rendez-vous, très connue pour être simple d’utilisation).

Vous trouverez sur ce lien le contenu de cette deuxième partie du tutoriel.

Le code source complet de l’exemple PollDLE est disponible à cette adresse : https://github.com/mickaelbaron/vuejs-polldle-tutorial-src.

Ce tutoriel a été écrit avec ❤️. J’espère qu’il vous plaira et vous aidera à développer des applications web monopages (Single-Page Application) avec Vue.js.

N’hésitez pas à laisser des commentaires sur le fil Twitter prévu à cet effet.