Note
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier les répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de changer de répertoire.
Dans cette présentation de 5 à 10 minutes de l’environnement de développement intégré (IDE) visual Studio, vous allez créer et exécuter une application web simple Vue.js.
Prerequisites
Il est impératif d'avoir Visual Studio installé ainsi que l'ensemble d'outils de développement pour Node.js.
Si vous n’avez pas encore installé Visual Studio 2019, accédez à la page de téléchargements de Visual Studio pour l’installer gratuitement.
Si vous avez besoin d’installer la charge de travail, mais que Visual Studio est déjà installé, accédez à ToolsGet Tools >and Features..., ce qui ouvre Visual Studio Installer. Choisissez la charge de travail de 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 meilleure compatibilité avec les infrastructures et bibliothèques externes. Node.js est conçu 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 de 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 de propriétés (après avoir créé un projet, cliquez avec le bouton droit sur le nœud du projet, choisissez Propriétés et définissez le chemin d’accèsNode.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
Tout d’abord, vous allez 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, consultez 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 De base Vue.js, puis choisissez Application web de base Vue.js (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 d’application web de base Vue.js, vous devez ajouter la charge de travail de développement Node.js. Pour obtenir des instructions détaillées, consultez les conditions préalables.
Visual Studio crée le nouveau projet. Le nouveau projet s’ouvre dans l’Explorateur de solutions (volet droit).
Consultez la fenêtre Sortie (volet inférieur) pour connaître la progression de l’installation des packages npm requis pour l’application.
Dans l’Explorateur de solutions, ouvrez le nœud npm et vérifiez que tous les packages npm répertoriés sont installés.
Si des packages sont manquants (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
Examinez l’Explorateur de solutions dans le volet droit.
En gras, votre projet est mis en évidence, en utilisant 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 votre dossier de projet.
Au niveau supérieur, il s’agit d’une solution qui, par défaut, porte le même nom que votre projet. Une solution, représentée par un . Le fichier sln sur le disque est un conteneur pour un ou plusieurs projets connexes.
Le nœud npm affiche 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 tel que le dossier src/components , puis choisissez Ajouter>un 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 un composant de fichier unique Vue JavaScript ou un composant de fichier unique TypeScript Vue, puis cliquez sur Ajouter.
Visual Studio ajoute le nouveau fichier au projet.
Créer le projet
Ensuite, choisissez Générer la>solution pour générer le projet.
Vérifiez la fenêtre Sortie pour afficher les résultats de build, puis choisissez Générer dans la liste Afficher la sortie .
Le modèle de projet JavaScript Vue.js (et les versions antérieures du modèle TypeScript) utilisent le build script npm en configurant un événement post-build. Si vous souhaitez modifier ce paramètre, ouvrez le fichier projet (<projectname.njsproj>) à partir de l’Explorateur Windows et recherchez cette ligne de code :
<PostBuildEvent>npm run build</PostBuildEvent>
Exécuter l’application
Appuyez sur Ctrl+F5 (ou Déboguer > démarrer sans débogage) pour exécuter l’application.
Dans la console, un message 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 pour avoir terminé ce guide de démarrage rapide ! Nous espérons que vous avez appris un peu sur l’utilisation de l’IDE Visual Studio avec Vue.js. Si vous souhaitez approfondir ses fonctionnalités, poursuivez avec un tutoriel dans la section Tutoriels de la table des matières.