Tutoriel : Vue.js pour les débutants

Si vous débutez avec Vue.js, ce guide vous aidera à bien démarrer avec quelques notions de base.

• Essayez le bac à sable de code de HelloWorld Vue.js
• Essayer d’utiliser Node.js dans Visual Studio Code

Conditions préalables

• Vous devez d’abord installer Vue.js sur Windows ou sur le sous-système Windows pour Linux.

Essayer NodeJS avec Visual Studio Code

Si vous ne l’avez pas encore, installez VS Code. Nous vous recommandons d’installer VS Code sur Windows, que vous prévoyiez d’utiliser Vue sur Windows ou WSL.

1. Ouvrez votre ligne de commande et créez un répertoire : mkdir HelloVuepuis entrez le répertoire : cd HelloVue

2. Installez l’interface CLI Vue : npm install -g @vue/cli

3. Créez votre application Vue : vue create hello-vue-app

   Vous devez choisir d’utiliser Vue 2 ou Vue 3 Preview, ou de sélectionner manuellement les fonctionnalités souhaitées.

   

4. Ouvrez le répertoire de votre nouvelle hello-vue-app : cd hello-vue-app

5. Essayez d’exécuter votre nouvelle application Vue dans votre navigateur web : npm run serve

   Vous devriez voir « Bienvenue dans votre application Vue.js » http://localhost:8080 dans votre navigateur. Vous pouvez appuyer sur Ctrl+C pour arrêter le serveur vue-cli-service.

   Remarque

   Si vous utilisez WSL (avec Ubuntu ou votre distribution Linux préférée) pour ce tutoriel, vous devez vous assurer que vous disposez de l’extension Remote - WSL installée pour une expérience optimale en cours d’exécution et de modification de votre code avec le serveur distant VS.

6. Essayez de mettre à jour le message de bienvenue en ouvrant le code source de votre application Vue dans VS Code, entrez : code .

7. VS Code lance et affiche votre application Vue dans l’Explorateur de fichiers. Réexécutez votre application dans le terminal avec npm run serve et ouvrez votre navigateur web sur localhost afin de voir la page d'accueil Vue affichée. Recherchez le App.vue fichier dans VS Code. Essayez de changer « Bienvenue dans votre application Vue.js » en « Bienvenue dans la Jungle ! ». Vous verrez votre application Vue « recharger à chaud » dès que vous enregistrez votre modification.

   

Ressources supplémentaires

• Utilisation de Vue dans Visual Studio Code : en savoir plus sur l’utilisation de Vue avec VS Code, notamment l’extension Vetur qui fournit la mise en surbrillance de la syntaxe Vue, IntelliSense, la prise en charge du débogage, etc.

• Documentation de Vue.js

• Comparaison vue avec d’autres frameworks tels que React ou Angular

• Vue d’ensemble deVue.js

• Faites vos premiers pas avec le Vue.js parcours d'apprentissage