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 l’infrastructure Vue.js dans 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 sur les fichiers .vue
• Vue.js modèles de projet et de fichier

Conditions préalables

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

  Important

  Cet article nécessite des fonctionnalités disponibles uniquement à 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 Visual Studio est déjà installé, accédez à Tools>Obtenir des outils et des fonctionnalités..., ce 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, vous devez avoir installé les charges de travail de développement multiplateforme ASP.NET et de développement web .NET Core.

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

  Si vous ne l’avez pas installé, 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 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, cliquez avec le bouton droit sur le nœud du projet et choisissez Propriétés).

Créer 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 est le moyen le plus simple de commencer. Pour obtenir des instructions détaillées, consultez Utiliser Visual Studio pour créer votre première application Vue.js.

Créer un projet Vue.js avec ASP.NET Core et Vue CLI

Vue.js fournit une interface de ligne de commande officielle permettant de générer automatiquement des modèles rapidement pour les projets. Si vous souhaitez utiliser l’interface CLI 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 avez déjà une certaine expérience avec l’infrastructure Vue.js. Si ce n’est pas le cas, 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 principale vide (C#). 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 projet dans la fenêtre de démarrage. Si la fenêtre de démarrage n’est pas ouverte, choisissez Fichier>fenêtre de démarrage. Tapez application web, choisissez C# comme langage, puis choisissez ASP.NET Core Vide, puis Suivant. Dans l’écran suivant, nommez le projet d'application cliente , puis choisissez Suivant.

  Choisissez le framework cible recommandé ou .NET 6, puis choisissez 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 la ou 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). Le programme d’installation de Visual Studio démarre. Sélectionnez les charges de travail requises.

Configurer le fichier de démarrage du projet

• Ouvrez le fichier ./Startup.cs, puis 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).

Structurer une nouvelle application cliente à l’aide de l’interface CLI Vue

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

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

   Note

   Pour les fichiers .vue , vous devez utiliser webpack ou un framework similaire avec un chargeur pour effectuer la conversion. TypeScript et Visual Studio ne savent pas comment compiler les fichiers .vue. La même chose est vraie pour le regroupement ; TypeScript ne sait pas comment convertir des modules ES2015 (c’est-à-dire des instructions import et export) en un seul fichier de .js final à charger dans le navigateur. Là encore, webpack est le meilleur choix ici. Pour piloter ce processus à partir de Visual Studio à l’aide de MSBuild, vous devez commencer à partir d’un modèle Visual Studio. À l’heure actuelle, il n’existe aucun modèle ASP.NET pour le développement Vue.js prêt à l'emploi.

Modifier la configuration webpack pour générer les fichiers générés dans wwwroot

• Ouvrez le fichier ./client-app/config/index.js, puis remplacez le 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'),
  

Indiquez le projet pour 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 des modules de sortie de webpack

• Ouvrez le fichier ./client-app/build/webpack.base.conf.js, puis 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 Vue CLI

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

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

2. Tapez vue create client-app, puis choisissez Sélectionner manuellement les fonctionnalités.

3. Choisissez typeScript, puis sélectionnez d’autres options souhaitées.

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. Ensuite, créez 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 également générer le projet vue-cli 3.0 en tant qu’événement de pré-build à l’aide des 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 ../

Limitations

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

• lang attribut ne fonctionne pas avec des balises de modèle ou 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 en tant qu’événement de préversion 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 de configuration de Webpack.