CRÉEZ UN NOUVEAU

PROJET AVEC VUE@CLI

 copyright © 2023 [email protected] 26/10/2023

3
➢ Créer et configurer une nouvelle application Vue à l'aide de Vue CLI ;

➢ Construire une application en l'architecturant avec des composants ;

➢ Ajouter et configurer Vue Router dans votre application ;

➢ Utiliser des hooks de cycle de vie pour déterminer quand votre code

doit s'exécuter.
 copyright © 2023 [email protected] 26/10/2023

4 VUE@CLI

Une interface en ligne de commande (CLI) est obligatoire pour construire

des applications en entreprise. Cela est notamment dû à la complexité qui entoure ces
outils de build.
Les outils CLI existent fondamentalement pour fournir aux développeurs une base standard
facilitant le démarrage de projet.
Ainsi, les développeurs consacrent davantage de temps à la construction de l'application
plutôt qu'à sa configuration.
 copyright © 2023 [email protected] 26/10/2023

5 PRÉINSTALLE : NODE RELEASE V8.9

 copyright © 2023 [email protected] 26/10/2023

• winget install OpenJS.NodeJS

 copyright © 2023 [email protected] 26/10/2023

7 INSTALLEZ VUE CLI

• Pour commencer à utiliser la CLI de Vue, la version de Node 8.9 ou supérieure est
nécessaire (v8.11.0 ou + est recommandée).
• L'installation sur votre machine se fait en mettant cette ligne dans votre terminal (ou
Windows PowerShell si vous êtes sur Windows) :

npm install -g @vue/cli

# OU (selon si vous avez l’habitude d’utiliser npm ou yarn)
yarn global add @vue/cli
 copyright © 2023 [email protected] 26/10/2023

8 CRÉATION D’APPLICATION

• Lorsque votre terminal affiche une version 5.x ou >*.x, cela signifie que Vue CLI a été
installé avec succès !

• vue create my-vue-cli-app

 copyright © 2023 [email protected] 26/10/2023

9 CRÉEZ UN NOUVEAU PROJET :

 copyright © 2023 [email protected] 26/10/2023

10 INSTALLER L’EXTENTIONS VUE LANGUAGE

FEATURE
 copyright © 2023 [email protected] 26/10/2023

11 LANCEZ LE SERVEUR DE DÉVELOPPEMENT :

• npm run serve

 copyright © 2023 [email protected] 26/10/2023

12 DÉCOUVREZ L’ARCHITECTURE D’UNE APPLICATION VUE CLI:

• node_modules - contient l'ensemble des dépendances qui permettent à votre application de faire tout ce
qu'elle fait. Vous n'aurez que rarement (sinon jamais) besoin d'aller dans ce dossier, car il n'est généralement
pas attaché au repository, mais directement géré par npm ;

• public - ce répertoire contient le favicon.ico et le fichier index.html de base qui serviront à générer le reste
de votre application ;

• src - ce répertoire est celui dans lequel vous passerez 99 % de votre temps, car la quasi-totalité de votre code y
sera située ;

• .gitignore - ce fichier contient une liste de fichiers et/ou de répertoires qui ne seront pas attachés à un
repository. (le répertoire /dist, build (et ne nécessite donc aucun suivi), et le répertoire node_modules, qui
est automatiquement recréé à chaque lancement de la commande npm install ou yarn install;
 copyright © 2023 [email protected] 26/10/2023

13

Continuons et ouvrons ensuite le répertoire src :

• Assets - il s'agit du répertoire dans lequel vous placerez les images et les autres ressources
obligatoires auxquelles vous devrez peut-être faire référence dans votre application (c'est-à-dire
les vidéos, les documents PDF, etc.).
• Components - ce répertoire contiendra les composants de notre application .
• main.js - c'est ici que sont définies les options de configuration plus high-level de Vue. Ce fichier
peut sembler légèrement différent de ce à quoi nous sommes habitués, mais l'instanciation d'une
nouvelle application Vue devrait ressembler à ce que nous avons fait précédemment.
 copyright © 2023 [email protected] 26/10/2023

14

• package.json - il s'agit du fichier de configuration de base de votre projet. Il comprend des

métadonnées comme le nom et la version de votre projet, mais il contient également des
informations essentielles comme les scripts pouvant être exécutés (comme serve, build, lint)
et les dépendances requises pour votre projet :
• serve - il s'agit du script qui permet de lancer une environnement de développement en local,
• build - ce script permet de créer la version finale qui sera livrée à un client ou à l'utilisateur.
• Lint : Le linting fait référence à l'utilisation d'outils de linting, tels que ESLint pour JavaScript
 copyright © 2023 [email protected] 26/10/2023

15
 copyright © 2023 [email protected] 26/10/2023

16 VUE-DEVTOOLS

• GitHub - vuejs/devtools: ⚙️ https://github.com/vuejs/devtools#vue-devtools

• https://devtools.vuejs.org/guide/installation.html#beta
 copyright © 2023 [email protected] 26/10/2023

17 CRÉEZ LE ROUTAGE DE VOTRE APPLICATION:

• Cette dernière est ensuite mise à jour dynamiquement en fonction des besoins. Bien que
cela soit puissant, il y a tout de même un défaut principal : les utilisateurs ont besoin
d'URL différentes pour distinguer les différentes pages les unes des autres.
• tous les grands Framework disposent
d'une solution de routage.
La solution recommandée par Vue est
la bibliothèque officielle vue-router.
🚦https://github.com/vuejs/vue-router

vue add router

 copyright © 2023 [email protected] 26/10/2023

18 DÉCOUVREZ L’ANATOMIE DU ROUTEUR

• vous ouvrez le fichier router/index.js dans votre éditeur de code:

Chaque objet route contient trois propriétés clés :
✓ path (chemin) - l'URL correspondant
au composant ;

✓ name (nom) - le nom de cette route pour

l'étiquetage et le débuggage ;

✓ component (composant) - le composant qui doit

s'afficher lorsque le path est trouvé
 copyright © 2023 [email protected] 26/10/2023

19 COMPRENEZ LE FONCTIONNEMENT DE VUE ROUTER

• Il existe deux composants principaux que Vue Router utilise et que vous devrez apprivoiser pour
vos applications :
• <router-view></router-view> - il définit la zone de la page dans laquelle apparaîtra le composant
que nous définissons dans chaque route.
Il est particulièrement important si vous imbriquez des vues les unes dans les autres ;

• <router-link></router-link> - similaire à la balise anchor en HTML, ce composant permet

également la navigation de l'utilisateur dans l'application.
Cependant, il est privilégié par rapport à l'utilisation d'une balise d'ancrage standard, car il dispose
de fonctionnalités intégrées, comme le fait qu'il évite de recharger systématiquement la page.
 copyright © 2023 [email protected] 26/10/2023

20 CRÉEZ DES ROUTES DYNAMIQUES :

• Vous souhaitez avoir une page individuelle pour chaque élément du menu, mais vous
souhaitez utiliser une même page ItemDetail.vue pour voir le détail de l'élément. Pour
cela, vous avez besoin que la route passe l'information de manière dynamique.
• Vue Router règle ce problème en permettant le matching de route dynamique.
• vous pourriez configurer votre route de la façon suivante :
 copyright © 2023 [email protected] 26/10/2023

21 DÉCOUVREZ LE CYCLE DE VIE D’UN COMPOSANT:

• Les frameworks JavaScript ont bien intégré ce besoin, et permettent d'exécuter notre code à
différents moments. Pour résoudre ce problème, la plupart des frameworks utilisent le concept
de cycle de vie des composants (components lifecycle)
1. Create - qui représente la durée pendant laquelle le composant est en construction.
2. Mount - qui représente le moment durant lequel le composant va être rendu sur notre page.
3. Destroy - qui représente le moment où le composant va être retiré de la page.

Les hooks font référence aux fonctions spéciales ou aux méthodes prédéfinies que vous pouvez
implémenter dans un composant Vue pour contrôler son cycle de vie. Le cycle de vie d'un composant Vue se
réfère aux différentes étapes par lesquelles un composant passe, depuis sa création jusqu'à sa destruction.
 copyright © 2023 [email protected] 26/10/2023

22 DÉCOUVREZ LES HOOKS DE CYCLE DE VIE:

• Vue proposent des hooks de cycle de vie (life cycle hooks).

• Ils permettent d'accéder à des événements spécifiques autour de ces étapes. Nous pouvons ainsi réaliser des actions
comme déclencher du code qui fait appel à des API, avant même l'apparition du composant sur la page. Les principaux
hooks que nous verrons ici sont les suivants :
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeDestroy
6. destroyed
 copyright © 2023 [email protected] 26/10/2023

23
 copyright © 2023 [email protected] 26/10/2023

24 EXEMPLE : UTILISEZ DES HOOKS DE CYCLE DE VIE

 copyright © 2023 [email protected] 26/10/2023

25 APPLICATION

Créez une application de gestion de tâches simple (ToDo List) en utilisant

Vue.js ,qui permettra aux utilisateurs d'ajouter, de cocher comme terminées,
de modifier et de supprimer des tâches.
L'application devrait afficher une liste de tâches, où chaque tâche est
représentée par un élément de liste. Les utilisateurs doivent être en mesure
d'ajouter de nouvelles tâches en saisissant un texte dans un champ d'entrée
et en appuyant sur la touche 'Entrée'.
Ils peuvent également cocher les tâches comme terminées en cliquant sur une
case à cocher. De plus, les utilisateurs peuvent modifier le nom d'une tâche
en cliquant sur le texte de la tâche, en le modifiant et en appuyant sur
'Entrée' pour enregistrer les modifications.
Enfin, les utilisateurs peuvent supprimer une tâche en cliquant sur un
bouton de suppression associé à chaque tâche. L'application devrait
également afficher le nombre de tâches restantes à accomplir.
 copyright © 2023 [email protected] 26/10/2023

26 @FRONT
 copyright © 2023 [email protected] 26/10/2023

27

• merci