Démarrage rapide : Créer un projet Vue.js

Dans ce guide de prise en main, vous créez et exécutez une application web front-end Vue.js de base. Cet article fournit une introduction de 5 à 10 minutes à l’environnement de développement intégré (IDE) Visual Studio.

Conditions préalables

Préparez votre configuration avec les conditions préalables suivantes :

Créer votre application Vue

Créez une application web Vue.js en procédant comme suit :

  1. Dans la fenêtre Visual Studio Démarrer (sélectionnez Fichier>Fenêtre de démarrage), sélectionnez Créer un nouveau projet.

    Capture d’écran montrant comment sélectionner l’option « Créer un projet ».

    Capture d’écran montrant comment sélectionner l’option « Créer un projet ».

  2. Dans la boîte de dialogue Créer un projet, entrez Vue dans la zone de recherche. Sélectionnez le modèle d’application Vue pour JavaScript ou TypeScript, puis sélectionnez Suivant.

    Capture d’écran montrant comment choisir un modèle Vue pour JavaScript ou TypeScript.

    Capture d’écran montrant comment choisir un modèle Vue pour JavaScript ou TypeScript.

    Dans Visual Studio 2022 version 11 et ultérieure, le nom de modèle JavaScript Vue autonome Project est remplacé par Vue App.

  3. Entrez un nom pour votre projet et votre solution, puis sélectionnez Créer.

Attendez que Visual Studio crée votre nouveau projet.

Afficher les propriétés du projet

Les paramètres de projet par défaut vous permettent de générer et de déboguer le projet.

Si vous souhaitez modifier des paramètres, procédez comme suit :

  1. Cliquez avec le bouton droit sur le projet dans Explorateur de solutions, puis sélectionnez Propriétés.

  2. Dans le volet des propriétés du projet, sélectionnez Déboguer, Linting, Build ou Deploy pour afficher les propriétés correspondantes.

Pour la configuration du débogueur, utilisez le fichier launch.json .

Remarque

Le launch.json fichier de configuration du débogueur stocke les paramètres de démarrage associés à l’action Démarrer dans la barre d’outils Débogage. Le launch.json fichier doit se trouver sous le .vscode dossier de votre projet.

Créer votre projet

Pour générer votre nouveau projet, sélectionnez Générer la>solution.

Démarrer votre projet

Sélectionnez F5 ou utilisez l’action Démarrer en haut de la fenêtre.

Le projet ouvre une invite de commandes avec le texte suivant (ou similaire) :

VITE v4.4.9 ready in 780 ms

Remarque

Vérifiez la sortie de la console afin d’y repérer des messages, tels que des instructions pour mettre à jour votre version de Node.js.

Une fois le processus réussi, l’application de base Vue.js s’ouvre.

Étape suivante