Partager via


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.

Conditions préalables

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.

    préréglage Vue CLI

  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.

    hot reload de l'application Vue.js sur changement GIF animé

Ressources supplémentaires