Premiers pas avec Vue.js et Visual Studio Code

Bienvenue dans la première étape de votre parcours Vue.js !

Dans cet article, nous allons examiner comment configurer votre environnement de développement en utilisant Visual Studio Code comme environnement de développement intégré (IDE) et être opérationnel avec votre toute première application Vue.

Configuration du code Visual Studio

Visual Studio Code, ou VS Code en abrégé, est devenu un standard communautaire pour le développement Vue.js et le développement Web en général en raison de sa légèreté par rapport à d’autres IDE comme Webstorm et de la simplicité de sa configuration avec des plugins adaptés. exactement le type de langage de programmation (JS, HTML, Ruby) et même de framework (Vue.js, React, Rails) sur lesquels vous travaillez. En plus de tout le reste, c’est également gratuit.

Pour commencer, rendez-vous sur https://code.visualstudio.com/ et téléchargez-vous une copie de l’application en cliquant sur le gros bouton bleu qui dit « Télécharger ». Il tentera de détecter le meilleur programme d’installation pour vous en fonction de votre système (Mac, Windows, Linux). Si vous avez besoin de télécharger une version différente, cliquez sur la flèche à droite pour afficher une liste déroulante avec d’autres versions et options.

Une fois votre téléchargement terminé, exécutez le programme d’installation sur votre ordinateur local et suivez les étapes pour le configurer. Une fois que vous avez terminé, retrouvez-le dans vos applications et démarrez-le.

Lorsqu’il s’ouvre, vous serez accueilli par un écran de bienvenue qui ressemble à l’image suivante.

Rendez-vous dans le menu de gauche où se trouvent les boutons d’icônes et trouvez celui qui ressemble à Tetris (trois petits carrés et un quatrième venant remplir l’espace manquant). Cliquez dessus pour ouvrir la vue des plugins.

À partir de ce panneau, vous pouvez gérer et installer des plugins pour VS Code. Comme je l’ai mentionné plus tôt, ce sont les plugins qui font vraiment de VSCode un excellent IDE. Vue.js a un plugin officiel que nous allons installer. Cela aidera VS Code à comprendre .vue les fichiers fournissent également des conseils utiles, une mise en évidence et une intelligence (complétion automatique et suggestions de code basées sur le contexte actuel).

Vous pouvez installer le plugin de deux manières : en vous rendant sur le marché VS Code sur votre navigateur pour le Vue – Extension officielle et en l’installant à partir de là avec le bouton d’installation, ou en recherchant dans le panneau des plugins de VS Code Vue - Official et installation via l’EDI lui-même. Les deux méthodes aboutiront au même résultat, alors choisissez celle qui vous convient le mieux. Une fois installé, vous verrez une page de confirmation contenant des informations sur le plugin lui-même.

C’est tout pour la configuration de VS Code ! Passons à la configuration de votre premier projet Vue.

Création d’un nouveau projet Vue

Tout d’abord, nous devons installer Node.js (version 18+). Rendez-vous sur Noeud.js et téléchargez et installez la version indiquant « Recommandé pour la plupart des utilisateurs ». Cela téléchargera un programme d’installation pour votre système que vous pourrez ensuite exécuter pour tout configurer.

Une fois l’installation terminée, ouvrez le terminal de votre système. La navigation et l’utilisation du terminal dépassent le cadre de cet article, je vais donc simplement devoir supposer que vous avez les connaissances de base pour le naviguer vers un dossier de votre choix dans lequel vous souhaitez que vos projets de développement vivent (😅). Je suis un utilisateur Mac et je préfère garder le mien ~/Developer (/Users/marina/Developer).

Une fois que vous êtes sur le dossier choisi dans le terminal, continuez et exécutez la commande suivante :

npm create vue@latest

Quelques questions vous seront posées qui aideront le script à échafauder votre application Vue. Si vous ne savez pas à quoi sert actuellement une option particulière, ne paniquez pas. Sélectionner No et vous pourrez ajouter cet élément à votre application plus tard sans problème.

Voici le résultat de la commande complète :

npm create vue@latest
Need to install the following packages:
  create-vue@3.10.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … MyFirstVueApp
✔ Package name: … myfirstvueapp
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
    
Scaffolding project in /Users/marinamosti/Developer/MyFirstVueApp...
    
Done. Now run:
    
  cd MyFirstVueApp
  npm install
  npm run dev

Vous pouvez désormais également ouvrir le dossier nouvellement créé dans VS Code pour consulter tous les fichiers qui ont été créés pour vous.

Allez-y et exécutez les trois dernières commandes suggérées par le script, cela installera les dépendances nécessaires pour que l’application s’exécute et démarre le serveur de développement.

cd MyFirstVueApp
npm install
npm run dev

Une fois que tout est prêt, une URL vous sera demandée que vous pourrez utiliser pour consulter votre candidature.

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Allez-y et ouvrez-le sur votre navigateur.

Bravo! Vous servez et exécutez officiellement votre toute première application Vue.

L’extension du navigateur

Encore une chose avant de conclure. Vue est livré avec un plugin de navigateur officiel très pratique pour vous aider à mieux développer vos applications. Je recommande d’installer immédiatement le plugin dans le(s) navigateur(s) de votre choix car ils sont incroyablement utiles pour déboguer votre application.

Vous pouvez trouver la liste officielle et les liens pour chaque navigateur disponible ici : https://devtools.vuejs.org/guide/installation.html

Une fois que vous l’avez installé sur votre navigateur, essayez de revenir à l’onglet Application et d’ouvrir le panneau du développeur en cliquant avec le bouton droit sur le navigateur et en sélectionnant « Inspecter l’élément ». Une fois ouvert, accédez au nouveau Vue languette.

Emballer

Bravo, vous êtes maintenant entièrement prêt à commencer à créer des applications basées sur Vue !