Pour faire ce codelab, vous avez besoin des outils suivants :
Pour aider au développement, vous pouvez utiliser l'extention Chrome Vue-devtools (https://github.com/vuejs/vue-devtools)
Afin d'éviter les problèmes de réseau et gagner du temps le jour J, veuillez cloner ce projet et exécuter les commandes suivantes :
git clone -b step0 https://github.com/T3kstiil3/handson-vuejs
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Pour vérifier que tout marche correctement:
vue --version
vue --help
Vous devriez avoir une version > 3.* et une liste de commandes pour commencer votre projet.
Tous les exercices qui vont suivre se baseront sur deux pages statiques que nous avons développées.
Le but sera d'intégrer ces pages dans une application Vue.js.
Dans cette première partie pratique, nous allons juste intégrer le template que nous vous mettons à disposition dans une application vue.js.
Pour cela nous allons nous servir de l'utilitaire vue cli.
npm install -g @vue/cli
vue create .
Pour cette première étape, nous vous conseillons de désactiver eslint et le routeur lors de la génération de l'application. (ne pas faire en production ⚠️ 😉)
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
❯◉ CSS Pre-processors
◯ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
npm i
npm run serve
vue ui
home.html. Voici les prérequis :<body> doivent se trouver dans le fichier index.html<body> doit être inséré dans le composant App.vueNous allons à présent créer nos premiers composants. Le premier sera utilisé pour afficher le header et le second pour le bloc spécifique à une bière.
menu.vue dans lequel vous allez implémenter le menu principal de l'application. Ce composant possèdera un paramètre, un tableau de produits (le panier de l'utilisateur). Ce tableau sera utilisé pour calculer le prix total du panier.server/beers.jsonBeer.vue qui sera en charge d'afficher le détail d'un élément du tableau précédement créé. Voici les prérequis pour ce composant :menu.vue).Dans ce TP, nous allons dynamiser notre page avec les directives v-for, v-if et v-bind.
v-for, itérez sur la liste des bières afin d'afficher autant de composants Beer.vue qu'il y a d'éléments dans le tableau.Beer, ajoutez une propriété stock. Initiez cette propriété à 5 pour tous les éléménts du tableau utilisé par le composant principal.v-if, affichez un produit, si et seulement si sa propriété stock est supérieure à 0.v-bind:class sur l'élément ayant la classe thumbnail, ainsi que la classe suivante :.last {
background-color: rgba(255, 0, 0, 0.4)
}
menu, dynamisez le lien redirigeant l'utilisateur vers la page basket :Accéder à votre panier (vide)Accéder à votre panier (1 article(s) - 10€)Nous allons à présent créer des filtres, afin de formater le contenu de notre application.
uppercase pour écrire en majuscules le nom des bièrescurrency pour ajouter le sigle $ au prix de chaque bière.Computed Property. Itérez la directive v-for avec cette Computed Property afin de trier les éléments par la propriété price.Nous allons à présent intégrer à notre application une API REST.
Pour lancer le serveur, vous devez exécuter la commande suivante :
cd server
npm install
npm start
Le serveur sera disponible via l'URL http://localhost:1337/api/v1.
Cette API propose plusieurs points d'entrée :
GET sur /beers retournera la liste des bièresGET sur /basket retournera le panier de l'utilisateurPOST sur /basket pour ajouter une nouvelle bière au panier de l'utilisateurPour consommer cette API nous allons utiliser axios :
npm install axios --save
import axios from 'axios';
Vue.prototype.$http = axios;
Dans le composant principal :
menu afin d'afficher les informations associées (nombre d'élément, montant du panier).Nous allons à présent intégrer dans notre application le routeur proposé par la communauté vue.jS
vue-routerhome et baskethome aura la charge d'afficher le contenu de la page que nous avons implémenté dans les PWs précédentsbasket qui doit afficher, pour l'instant, le contenu du panier de l'utilisateur au format jsonApp, indiquez le point d'insertion des différentes pages de l'application à l'aide de la directive router-view.router-link dans le composant menu afin de rediriger l'utilisateur vers les deux composants que nous venons de créer.Dans ce PW, nous allons éditer le formulaire dans le composant basket créé précédemment.
basket.html.basket, créez un objet customer avec les propriétés name, address et creditCard.basket/confirm.has-error en fonction de l'état de validation du formulaire.vue-validate).Pour terminer ce codelab, nous allons intégrer la bibliothèque Vuex afin de gérer les états de l'application.
vuexstore devra être injecté dans chaque composant de notre application.basket et menu, utilisez le panier stocké dans le store pour afficher les informations nécessaires.store n'est pas définie, veuillez envoyer la requête vers le serveur, afin de l'initialiser.