Démarrage rapide : utiliser Visual Studio pour créer votre première application Vue.js
Dans cette présentation de 5-10 minutes de l’environnement de développement intégré (IDE) de Visual Studio, vous allez créer et exécuter une application web Vue.js simple.
Prérequis
Au préalable, vous devez avoir installé Visual Studio et la charge de travail de développement Node.js.
Si vous n’avez pas encore installé Visual Studio 2019, accédez à la page Téléchargements Visual Studio pour l’installer gratuitement.
Si vous devez installer la charge de travail, mais que vous avez déjà installé Visual Studio, cliquez sur Outils>Obtenir les outils et fonctionnalités..., qui ouvre Visual Studio Installer. Choisissez la charge de travail Développement Node.js, puis choisissez Modifier.
Le runtime Node.js doit être installé.
Si vous ne l’avez pas installé, nous vous recommandons d’installer la version LTS à partir du site web Node.js pour une compatibilité optimale avec les infrastructures et bibliothèques externes. Node.js est généré pour les architectures 32 bits et 64 bits. Les outils Node.js dans Visual Studio, inclus dans la charge de travail Node.js, prennent en charge les deux versions. Un seul est requis et le programme d’installation Node.js ne prend en charge qu’une seule installation à la fois.
En règle générale, Visual Studio détecte automatiquement le runtime Node.js installé. S’il ne détecte pas un runtime installé, vous pouvez configurer votre projet pour référencer le runtime installé dans la page des propriétés (après avoir créé un projet, faites un clic droit sur le nœud du projet, choisissez Propriétés, puis définissez le chemin d’accès Node.exe). Vous pouvez utiliser une installation globale de Node.js ou spécifier le chemin d’accès à un interpréteur local dans chacun de vos projets Node.js.
Création d’un projet
Vous allez d’abord créer un projet d’application web Vue.js.
Si le runtime Node.js n’est pas déjà installé, installez la version LTS à partir du site web Node.js.
Pour plus d’informations, voir les Conditions préalables.
Ouvrez Visual Studio.
Créez un projet.
Appuyez sur Échap pour fermer la fenêtre de démarrage. Tapez Ctrl+Q pour ouvrir la zone de recherche, tapez Basic Vue.js, puis choisissez Application web Vue.js de base (JavaScript ou TypeScript). Dans la boîte de dialogue qui s’affiche, tapez le nom basic-vuejs, puis choisissez Créer.
Si vous ne voyez pas le modèle de projet Application web Vue.js de base, vous devez ajouter la charge de travail Développement Node.js. Pour obtenir des instructions détaillées, consultez les Prérequis.
Visual Studio crée le nouveau projet. Le nouveau projet s’ouvre dans l’Explorateur de solutions (volet droit).
Vérifiez la progression de l’installation des packages npm nécessaires pour l’application dans la fenêtre Sortie (volet inférieur).
Dans l’Explorateur de solutions, ouvrez le nœud npm et vérifiez que tous les packages npm répertoriés sont installés.
S’il manque des packages (icône de point d’exclamation), vous pouvez cliquer avec le bouton droit sur le nœud npm et choisir Installer les packages npm manquants.
Explorer l’IDE
Observez l’Explorateur de solutions dans le volet droit.
Votre projet mis en gras, avec le nom que vous avez donné dans la boîte de dialogue Nouveau projet. Sur le disque, ce projet est représenté par un fichier .njsproj dans le dossier de votre projet.
Au niveau le plus élevé figure une solution, qui a par défaut le même nom que votre projet. Une solution, représentée par un fichier .sln sur le disque, est un conteneur pour un ou plusieurs projets connexes.
Le nœud npm montre tous les packages npm installés. Vous pouvez cliquer avec le bouton droit sur le nœud npm pour rechercher et installer des packages npm à l’aide d’une boîte de dialogue.
Si vous souhaitez installer des packages npm ou exécuter des commandes Node.js à partir d’une invite de commandes, cliquez avec le bouton droit sur le nœud du projet et choisissez Ouvrir l’invite de commandes ici.
Ajouter un fichier .vue au projet
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur n’importe quel dossier, par exemple le dossier src/components, puis choisissez Ajouter>Nouvel élément.
Si vous ne voyez pas tous les modèles d’élément, choisissez Afficher tous les modèles, puis choisissez le modèle d’élément.
Sélectionnez Composant monofichier Vue JavaScript ou Composant monofichier Vue TypeScript, puis cliquez sur Ajouter.
Visual Studio ajoute le nouveau fichier au projet.
Créer le projet
Ensuite, choisissez Générer>Générer la solution pour générer le projet.
Consultez la fenêtre Sortie pour afficher les résultats de la génération, puis choisissez Build dans la liste Afficher la sortie à partir de.
Le modèle de projet JavaScript Vue.js (et les versions antérieures du modèle TypeScript) utilisent le script npm build en configurant un événement post-build. Si vous souhaitez modifier ce paramètre, ouvrez le fichier projet (<nom_projet>.njsproj) à partir de l’Explorateur Windows et recherchez cette ligne de code :
<PostBuildEvent>npm run build</PostBuildEvent>
Exécution de l'application
Appuyez sur Ctrl+F5 ou (Déboguer > Démarrer sans débogage) pour exécuter l’application.
Dans la console, un message signalant le démarrage du serveur de développement s’affiche.
Ensuite, l’application s’ouvre dans un navigateur.
Si vous ne voyez pas l’application en cours d’exécution, actualisez la page.
Fermez le navigateur web.
Félicitations ! Vous avez terminé ce guide de démarrage rapide. Nous espérons que vous en avez appris un peu plus sur l’utilisation de l’IDE de Visual Studio avec Vue.js. Si vous souhaitez en savoir plus sur ses fonctionnalités, poursuivez avec l’un des tutoriels de la section Tutoriels dans la table des matières.