Installation et Configuration de Visual Studio Code
Objectifs
Les objectifs de cette vidéo sont de vous apprendre à installer et configurer Visual Studio Code, à utiliser des extensions essentielles pour Vue.js, et à préparer efficacement votre environnement de développement.
Résumé
Cette leçon explique comment préparer votre environnement de développement pour Vue 3 en configurant Visual Studio Code avec des extensions essentielles.
Description
Vous êtes certainement impatient de coder en Vue 3. Un peu de patience. Dans cette vidéo, vous allez préparer votre environnement de développement. Cette étape est nécessaire et elle vous fera gagner beaucoup de temps dans vos futurs développements. Allons-y. Nous allons commencer par l'éditeur de code Visual Studio Code. S'il n'est pas encore installé sur votre ordinateur, allez sur la page https://code.visualstudio.com et installez Visual Studio Code en cliquant sur l'un des boutons suivants. Une fois VS Code installé, nous allons voir quelles extensions vous devriez utiliser. L'une d'entre elles est installée par défaut, c'est l'extension Emmet. Pour les autres, vous devrez les installer. Nos développements vont se faire dans le dossier vue3 du disque C sous Windows 10, mais vous pouvez utiliser n'importe quel autre dossier. Lancez la commande Open Folder dans le menu File et désignez ce dossier.
Vous allez maintenant créer un nouveau fichier HTML dans le dossier vue3. Pour cela, cliquez du bouton droit dans le volet gauche de VS Code et sélectionnez New File dans le menu contextuel. Donnez un nom quelconque au nouveau fichier et une extension HTML, par exemple test.html. Pour créer un squelette standard HTML5, tapez HTML 2.5 et appuyez sur la touche Entrée du clavier. Voici le résultat. Immédiatement, un squelette standard HTML5 est inséré dans VS Code, ce qui est très pratique. Les possibilités du plugin Emmet ne s'arrêtent pas là. Vous utiliserez plusieurs autres abréviations pour faciliter l'écriture de code HTML.
Voyons maintenant une extension très pratique, mais qui, elle, n'est pas installée par défaut dans VS Code. Il s'agit de l'extension VETUR, qui ajoute de nombreuses fonctionnalités pour faciliter le développement Vue.js. Voyons comment installer l'extension VETUR. Cliquez sur l'icône Extension dans la partie supérieure gauche de la fenêtre, tapez VETUR et cliquez sur Install sous VETUR. Désormais, dans un fichier d'extension VUE, vous pouvez taper inférieur VUE et appuyer sur la touche Entrée pour que le squelette du composant soit inséré dans le fichier VUE.
Une autre extension très pratique, Live Server, vous sera très utile dans vos futurs développements. Elle exécute votre code dans un serveur local. Chaque fois que le code est modifié dans VS Code, l'affichage dans le navigateur est automatiquement mis à jour. Pour ouvrir un fichier HTML en cours d'édition dans le serveur local Live Server, cliquez du bouton droit sur le code de ce fichier dans VS Code et cliquez sur Open with Live Server dans le menu contextuel.
Terminons par l'invite de commandes. Lors de vos développements en Vue 3, vous devrez taper des commandes textuelles, par exemple pour créer un nouveau projet avec Vue Cli. Pour cela, vous pouvez utiliser une fenêtre Invite de commandes sous Windows, une fenêtre Terminal sous OS X ou le Terminal intégré dans VS Code, quel que soit votre système d'exploitation.
Questions - réponses
Programme détaillé
Module 1 - Premiers pas en Vue3
Module 2 - Les composants Vue JS
Module 3 - Les applications SPA (Single Page Applications)
Module 4 - L'interface en ligne de commande Vue-Cli
Module 5 - Le gestionnaire d'état Vuex
Module 6 - Le gestionnaire d'état Pinia
Module 7 - Persistance des données avec Firebase
Module 8 - Plus loin avec Vue.js 3
Facebook
Twitter
Linkedin
Email
