INTRODUCTION AU FRAMEWORK VUE.JS PAR L’EXEMPLE

Auteur

Serge Tahé, octobre 2019, https://sergetahe.com

Licence

Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 3.0 non transposé.

Téléchargements

Téléchargement du PDF du cours

Téléchargement des exemples du cours (rar)

Table des matières:

• Présentation du cours
• Création d’un environnement de travail
• projet [vuejs-01] : les bases
• projet [vuejs-02] : utilisation du framework CSS Bootstrap
  • Installation du framework [BootstrapVue]
  • Le script [main.js]
  • Le composant [App.vue]
  • Le composant [HelloBootstrap]
  • Exécution du projet
• projet [vuejs-03] : gestion des événements
  • Le script principal [main.js]
  • Le composant principal [App.vue]
  • Le composant [ClickOnMe]
  • Exécution du projet
• projet [vuejs-04] : directives [v-model, v-bind], attributs calculés, formulaire de saisie
  • Le script principal [main.js]
  • Le composant principal [App]
  • Le composant [Form]
  • Exécution du projet
• projet [vuejs-05] : directive [v-for]
  • Le script principal [main.js]
  • Le composant principal [App]
  • Le composant [VFor]
  • Exécution du projet
• projet [vuejs-06] : mise en page d’une vue avec des slots
  • Le script principal [main.js]
  • Le composant principal [App]
  • Le composant [Layout]
  • Le composant [Right]
  • Le composant [Left]
  • Le composant [Content]
• projet [vuejs-07] : remontée d’événements dans la hiérarchie des composants
  • Le script principal [main.js]
  • Le composant principal [App]
  • Le composant [Component11]
  • Le composant [Component1]
  • Exécution du projet
• projet [vuejs-08] : événements indépendants de la hiérarchie des composants, cycle de vie des composants
  • Le script principal [main.js]
  • Le script [even-bus.js]
  • La vue principale [App.vue]
  • Le composant [Component1]
  • Le composant [Component2]
  • Le composant [Component3]
  • Exécution du projet [vuejs-08]
• projet [vuejs-09] : utilisation d’un plugin [eventBus]
  • Le plugin [./plugins/event-bus]
  • Le script principal [main.js]
  • La vue principale [App]
  • Le composant [Component1]
  • Le composant [Component2]
  • Composant [Component3]
  • Exécution du projet
• projet [vuejs-10] : plugin [dao], requêtes HTTP asynchrones
  • Installation des dépendances
  • La classe [Dao]
  • Le plugin [pluginDao]
  • Le script principal [main.js]
  • La vue principale [App.vue]
  • Le composant [Component1]
  • Exécution du projet
• projet [vuejs-11] : routage et navigation
  • Installation des dépendances
  • Le script de routage [router.js]
  • Le script principal [main.js]
  • La vue principale [App]
  • La mise en page des vues
  • Le composant de navigation
  • Les vues
  • Exécution du projet
• projet [vuejs-12] : gestion des tables HTML
  • Le script principal [main.js]
  • La vue principale [App]
  • Le composant [Table]
  • Exécution du projet
• projet [vuejs-13] : mise à jour d’un composant, utilisation d’une session
  • L’objet [session]
  • Le plugin [./plugins/pluginSession]
  • Le script principal [main.js]
  • La vue principale [App]
  • Le composant [Table]
  • Exécution du projet
• projet [vuejs-14] : rendre la session réactive
  • L’objet [session]
  • Le plugin [./plugins/pluginSession]
  • Le script principal [main.js]
  • La vue principale [App]
  • Le composant [Table]
  • Exécution du projet
• projet [vuejs-15] : utilisation du plugin [Vuex]
  • Installation de la dépendance [vuex]
  • Le script [./session.js]
  • Le script principal [./main.js]
  • La vue principale [App]
  • Le composant [Table]
  • Conclusion
• Client Vue.js du serveur de calcul de l’impôt
  • Architecture
  • Les vues de l’application
  • Eléments du projet [vuejs-20]
    • Les couches [métier] et [dao]
      • La couche [dao]
      • La couche [métier]
    • Le fichier de configuration [config]
    • Les plugins
    • Le store [Vuex]
    • Le fichier de routage [router]
    • Le script principal [main.js]
  • Les vues de l’application
    • La vue principale [Main]
    • La vue de mise en page [Layout]
    • La vue [Authentification]
    • La vue [CalculImpot]
    • Le menu de navigation [Menu]
    • La vue [FormCalculImpot]
    • La vue [ListeSimulations]
  • Exécution du projet
  • Déploiement de l’application sur un serveur local
  • Gestion des URL manuelles
• Améliorations du client Vue.js
  • Introduction
  • Le store [Vuex]
  • La session
  • Le fichier de configuration [config]
  • Le plugin [pluginSession]
  • Le script principal [main]
  • Le fichier de routage [router]
  • La vue [NotFound]
  • La vue [CalculImpot]
  • La vue [ListeSimulations]
  • Exécution du projet
  • Déploiement de l’application sur un serveur local
  • Mise au point de la version mobile
    • La vue [Main]
    • La vue [Layout]
    • La vue [CalculImpot]
    • La vue [FormCalculImpot]
    • La vue [Menu]
    • La vue [ListeSimulations]
    • La vue [NotFound]
    • Les vues sur mobile
• Déploiement de l’application client / serveur sur un service d’hébergement
  • Déploiement du serveur
  • Déploiement du client [Vue.js]
  • Conclusion