Créer une application Vue.js à l’aide de Node.js Tools pour Visual Studio

Visual Studio prend en charge le développement d’applications avec le framework Vue.js en JavaScript ou TypeScript.

Les nouvelles fonctionnalités suivantes prennent en charge le développement d’applications Vue.js dans Visual Studio :

• Prise en charge des blocs de script, de style et de modèle dans les fichiers .vue
• Reconnaissance de l’attribut lang dans les fichiers .vue
• Modèles de fichier et de projet vue.js

Prérequis

• Vous devez avoir installé Visual Studio 2017 version 15.8 ou ultérieure et la charge de travail Développement Node.js.

  Important

  Cet article nécessite des fonctionnalités qui sont uniquement disponibles à partir de Visual Studio 2017 version 15.8.

  Si aucune version requise n’est déjà installée, installez Visual Studio 2019.

  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.

• Pour créer le projet ASP.NET Core, les charges de travail Développement web et ASP.NET et Développement multiplateforme .NET Core doivent être installées.

• Le runtime Node.js doit être installé.

  Si vous ne l’avez pas déjà fait, installez la version LTS à partir du site web Node.js. En règle générale, Visual Studio détecte automatiquement le runtime Node.js installé. S’il ne détecte aucun runtime installé, vous pouvez configurer votre projet pour faire référence au runtime installé dans la page de propriétés. (Après avoir créé un projet, cliquez avec le bouton droit sur le nœud de projet, puis choisissez Propriétés).

Créez un projet Vue.js à l’aide de Node.js

Vous pouvez utiliser les nouveaux modèles Vue.js pour créer un projet. L’utilisation du modèle représente la façon la plus simple de bien démarrer. Pour obtenir une procédure détaillée, consultez Utiliser Visual Studio pour créer votre première application Vue.js.

Créer un projet Vue.js avec ASP.NET Core et l’interface de ligne de commande Vue

Vue.js fournit une interface de ligne de commande officielle permettant de générer des modèles automatiques rapidement pour les projets. Si vous souhaitez utiliser l’interface de ligne de commande pour créer votre application, suivez les étapes décrites dans cet article pour configurer votre environnement de développement.

Important

Ces étapes supposent que vous connaissez déjà le framework Vue.js. Dans le cas contraire, visitez Vue.js pour en savoir plus sur le framework.

Créer un projet ASP.NET Core

Pour cet exemple, vous utilisez une application ASP.NET Core (C#) vide. Toutefois, vous pouvez choisir parmi différents projets et langages de programmation.

Créer un projet vide

• Ouvrez Visual Studio et créez un projet.

  Dans Visual Studio 2019, choisissez Créer un nouveau projet dans la fenêtre de démarrage. Si la fenêtre de démarrage n’est pas ouverte, choisissez Fichier>Fenêtre Démarrer. Tapez application web, choisissez C# comme langage, puis choisissez ASP.NET Core Vide, puis Suivant. Dans l’écran suivant, nommez le projet application-client, puis choisissez Suivant.

  Choisissez l’infrastructure cible recommandée ou .NET 6, puis Créer.

  Si vous ne voyez pas le modèle de projet Application web ASP.NET Core, vous devez d’abord installer les charges de travail Développement web et ASP.NET et Développement .NET Core. Pour installer les charges de travail, cliquez sur le lien Ouvrir Visual Studio Installer dans le volet gauche de la boîte de dialogue Nouveau projet (sélectionnez Fichier>Nouveau>Projet). Visual Studio Installer est lancé. Sélectionnez les charges de travail nécessaires.

Configurer le fichier de démarrage du projet

• Ouvrez le fichier ./Startup.cs et ajoutez les lignes suivantes à la méthode Configure :

  app.UseDefaultFiles(); // Enables default file mapping on the web root.
  app.UseStaticFiles(); // Marks files on the web root as servable.
  

Installer l’interface CLI Vue

Pour installer le module npm vue-cli, ouvrez une invite de commandes et tapez npm install --g vue-cli ou npm install -g @vue/cli pour la version 3.0 (actuellement en version bêta).

Générer automatiquement des modèles pour une nouvelle application cliente à l’aide de l’interface CLI Vue

1. Accédez à l’invite de commandes et remplacez le répertoire actif par votre dossier racine du projet.

2. Tapez vue init webpack client-app et suivez les étapes quand vous êtes invité à répondre à des questions supplémentaires.

   Notes

   Pour les fichiers .vue, vous devez utiliser Webpack ou une infrastructure similaire avec un chargeur qui effectuera la conversion. TypeScript et Visual Studio ne savent pas compiler des fichiers .vue. Il en va de même pour le regroupement : TypeScript ne sait pas convertir des modules ES2015 (autrement dit, les instructions import et export) en un seul fichier .js final à charger dans le navigateur. Ici encore, Webpack est la meilleure solution. Pour exécuter ce processus dans Visual Studio à l’aide de MSBuild, vous devez commencer par un modèle Visual Studio. À l’heure actuelle, il n’existe aucun modèle ASP.NET préconfiguré pour le développement Vue.js.

Modifier la configuration de Webpack pour installer les fichiers générés sur wwwroot

• Ouvrez le fichier ./client-app/config/index.js et remplacez build.index et build.assetsRoot par le chemin wwwroot :

  // Template for index.html
  index: path.resolve(__dirname, '../../wwwroot/index.html'),
  
  // Paths
  assetsRoot: path.resolve(__dirname, '../../wwwroot'),
  

Indiquer au projet de générer l’application cliente chaque fois qu’une build est déclenchée

1. Dans Visual Studio, accédez à Projet>Propriétés>Événements de build.

2. Dans Ligne de commande de l’événement pré-build, tapez npm --prefix ./client-app run build.

Configurer les noms de module de sortie de Webpack

• Ouvrez le fichier ./client-app/build/webpack.base.conf.js et ajoutez les propriétés suivantes à la propriété de sortie :

  devtoolModuleFilenameTemplate: '[absolute-resource-path]',
  devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  

Ajouter la prise en charge de TypeScript avec l’interface CLI Vue

Ces étapes nécessitent vue-cli 3.0 qui est actuellement en version bêta.

1. Accédez à l’invite de commandes et remplacez le répertoire actif par le dossier racine du projet.

2. Tapez vue create client-app, puis choisissez Manually select features (Sélectionner manuellement les fonctionnalités).

3. Choisissez Typescript, puis sélectionnez les autres options de votre choix.

4. Suivez les étapes restantes et répondez aux questions.

Configurer un projet Vue.js pour TypeScript

1. Ouvrez le fichier ./client-app/tsconfig.json et ajoutez noEmit:true aux options du compilateur.

   En définissant cette option, vous évitez d’encombrer votre projet chaque fois que vous générez dans Visual Studio.

2. Créez ensuite un fichier vue.config.js dans ./client-app/ et ajoutez le code suivant.

   module.exports = {
       outputDir: '../wwwroot',
   
       configureWebpack: {
           output: {
               devtoolModuleFilenameTemplate: '[absolute-resource-path]',
               devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
           }
       }
   };
   

   Le code précédent configure Webpack et définit le dossier wwwroot.

Générer avec vue-cli 3.0

Un problème inconnu avec vue-cli 3.0 peut empêcher l’automatisation du processus de génération. Chaque fois que vous essayez d’actualiser le dossier wwwroot, vous devez exécuter la commande npm run build sur le dossier client-app.

Vous pouvez aussi générer le projet vue-cli 3.0 comme un événement pré-build en utilisant les propriétés du projet ASP.NET. Faites un clic droit sur le projet, choisissez Propriétés et ajoutez les commandes suivantes dans l’onglet Build sous la zone de texte Ligne de commande de l'événement pré-build.

cd ./client-app
npm run build
cd ../

Limites

• L’attribut lang prend uniquement en charge les langages JavaScript et TypeScript. Les valeurs acceptées sont : js, jsx, ts et tsx.

• L’attribut lang ne fonctionne pas avec les balises de modèle ni de style.

• Le débogage des blocs de script dans les fichiers .vue n’est pas pris en charge en raison de sa nature prétraitée.

• TypeScript ne reconnaît pas les fichiers .vue comme modules. Vous avez besoin d’un fichier qui contient du code tel que le suivant pour indiquer à TypeScript à quoi ressemblent les fichiers .vue (le modèle vue-cli 3.0 inclut déjà ce fichier).

  // ./client-app/vue-shims.d.ts
  declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
  }
  

• L’exécution de la commande npm run build comme un événement pré-build sur les propriétés du projet ne fonctionne pas lors de l’utilisation de vue-cli 3.0.

Contenu connexe

• Guide de mise en route Vue.
• Projet avec l’interface de ligne de commande Vue.
• Documentation sur la configuration de webpack.