VueJS - Avancé

VueJS - Avancé

On va s'attaquer à des concepts plus avancés de VueJS et des framework JS récent en général. Vous allez voir c'est très proche de Flutter et des concepts qui s'y rattache.

1 - Création d'un projet avec Vue-CLI

Nous allons créer ensemble un projet Vue-CLI

Commencez par installer Node.JS sur votre ordinateur si c'est pas le cas.

2 - Lets goooo

Nous allons faire un E-Commerce ultra simple, mais il va nous permettre d'apprendre beaucoup de chose avec la gestion des états, mais aussi les composants Vue ainsi que le routeur Vue.

On va utiliser une API utile pour apprendre : Fake Store API

Fake Store API
Fake store rest api for your ecommerce or shopping website prototype

Exercice 1

Allez dans le fichier Home.vue et faites en sorte de récupérer les données de la route https://fakestoreapi.com/products et affichez les dans la console du navigateur.

Utilisez axios pour lancer la requête, et faite le dans le hook du cycle de vie qui est optimal pour ce genre d'opération.

Exercice 2

On veut maintenant afficher les produits dans Home.vue, sous forme d'une grille. On veut afficher les données suivantes sur un produit :

  • Son nom
  • Son prix
  • Une image

Au niveau du CSS, vous pouvez directement utiliser la balise style dans vos composant .vue pensez à l'attribut scoped

Personnellement je suis fan de Tailwind alors je l'utilise en lançant la commande : vue add tailwind qui fonctionne car la communauté à créer un plugin tailwind pour Vue-CLI, ce qui n'est pas le cas pour toutes les dépendances NPM !

Exercice 3 - Ajouter au panier

  • Lors du clique sur un produit, vous devez faire apparaitre un bouton "Add To Cart" et ajouter une bordure bleu au produit.
  • Le bouton Add To Cart doit ajouter le produit dans une liste qui sera votre panier.
  • Créer votre plus belle variable réactive pour stocker les produits dans le Panier.
  • Remplacer le bouton "Add to Cart" par "Remove from Cart" quand le produit est dans le panier.
  • Afficher simplement le nombre de produit dans le panier sur la page. On doit pouvoir ajouter et supprimer des produits facilement.

Exercice 4 - Créer un composant

Pour afficher les détails d'un produit, utiliser le router Vue dans /router/index.js et créer une nouvelle page qui prendre en paramètre l'ID du produit.

Cette page doit être un composant fichier .vue

  • Faite en sorte que lors du clique sur un produit Vue affiche la page de détail du produit sélectionné.
  • Le retour du navigateur doit fonctionner.
  • On doit pouvoir ajouter au panier également depuis le détail d'un produit.

Exercice 5 -  Le panier

Créer un autre composant pour afficher le panier, également en utilisant Vue Router.

Le panier doit permettre de modifier la quantité de chaque produit, de calculer le total par ligne produit et également le total de tout les produits du panier.

Exercice 5 - Le Store Vuex

Bon maintenant que vous avez vu comme c'est embêtant de passer des données de composants à composants, on va pouvoir comprendre l'intérêt de Vuex.

What is Vuex? | Vuex
Centralized State Management for Vue.js

On va construire ensemble une première action de notre store Vuex.

Exercice 6 - Deployer le store partout

Utiliser le store en créant vos propres actions et mutations pour :

export default createStore({
  getters: {
   //
  },
  state: {
   //
  },
  mutations: {
   //
  },
  actions: {
    loadProducts() {  
    	//
    },
    loadBag(){ 
    	//
    },
    removeFromBag(){ 
    	//
    },
    addToBag(){ 
    	//
    }
  },
  modules: {
  }
})
  • Utiliser le store sur vos 3 pages.
  • Où est-ce judicieux d'appeler l'action du store qui charge les produits via l'API ?

Exercice 7

  • Faites en sorte de sauvegarder le panier entre les sessions d'utilisation du site.
  • Le site doit demander une confirmation à l'utilisateur quand il veut supprimer un produit du panier. Où placer cette confirmation pour modifier le moins possible le code ?

Exercice 8 - Modal & Transitions

  • Faite en sorte que le détail d'un produit soit en fait une modal qui s'affiche par dessus la liste des produits.
  • Au clic pour changer de page ou afficher la modal, vous devez implémenter une transition animée.
Transitions d’entrée, de sortie et de liste — Vue.js
Vue.js - Le Framework JavaScript Évolutif

Un point sur la Composition API

Au cours de votre développement vous avez surement vu passer des choses a propos de l'Option API et de la Composition API.

Une bonne vidéo explique ici pourquoi c'est cool : https://grafikart.fr/tutoriels/vue-3-composition-api-1209

Mais le problème est que pour le moment pas tout les outils sont près pour cette API, meme si un plugin existe pour Vue2.

L'API Options, qui est celle de base fonctionne de pair avec Composition API, vous êtes pas obligé d'apprendre Composition API, mais c'est bien de le savoir.

Un point sur le SSR

Inspecter le code de votre site web en

Commentaires

Connectez vous ou devenez un membre de Async pour rejoindre la conversation.
Entrez un mail ici pour recevoir un lien de connexion, super simple ⚡️