Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
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.
Ouvrez votre ligne de commande et créez un répertoire :
mkdir HelloVue
puis entrez le répertoire :cd HelloVue
Installez l’interface CLI Vue :
npm install -g @vue/cli
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.
Ouvrez le répertoire de votre nouvelle hello-vue-app :
cd hello-vue-app
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.
Essayez de mettre à jour le message de bienvenue en ouvrant le code source de votre application Vue dans VS Code, entrez :
code .
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 leApp.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.
Comparaison vue avec d’autres frameworks tels que React ou Angular
Faites vos premiers pas avec le Vue.js parcours d'apprentissage
Windows developer