Erstellen einer Vue.js Anwendung mit Node.js Tools für Visual Studio

Visual Studio unterstützt die App-Entwicklung mit dem Vue.js Framework in JavaScript oder TypeScript.

Die folgenden neuen Features unterstützen Vue.js Anwendungsentwicklung in Visual Studio:

• Unterstützung für Skript-, Format- und Vorlagenblöcke in .vue-Dateien
• Erkennung des attributs lang für .vue-Dateien
• Vue.js Projekt- und Dateivorlagen

Voraussetzungen

• Sie müssen Visual Studio 2017 Version 15.8 oder höher und die Workload Node.js-Entwicklung installiert haben.

  Wichtig

  Dieser Artikel erfordert Features, die ab Visual Studio 2017, Version 15.8, nur verfügbar sind.

  Wenn noch keine erforderliche Version installiert ist, installieren Sie Visual Studio 2019.

  Wenn Sie die Workload installieren müssen, aber bereits über Visual Studio verfügen, wechseln Sie zu Tools>Abrufen von Tools und Features..., wodurch das Visual Studio-Installationsprogramm geöffnet wird. Klicken Sie auf die Workload Node.js-Entwicklung und anschließend auf Ändern.

• Zum Erstellen des ASP.NET Core-Projekts müssen die Arbeitslasten für die ASP.NET- und Webentwicklung sowie die plattformübergreifende .NET Core-Entwicklung installiert sein.

• Sie müssen die Node.js Runtime installiert haben.

  Wenn sie nicht installiert ist, installieren Sie die LTS-Version von der Node.js-Website. Im Allgemeinen erkennt Visual Studio automatisch die installierte Node.js Laufzeit. Wenn keine installierte Laufzeit erkannt wird, können Sie Ihr Projekt so konfigurieren, dass auf die installierte Laufzeit auf der Eigenschaftenseite verwiesen wird. (Nachdem Sie ein Projekt erstellt haben, klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie Eigenschaften) aus.

Erstellen eines Vue.js Projekts mithilfe von Node.js

Sie können die neuen Vue.js-Vorlagen verwenden, um ein neues Projekt zu erstellen. Die Verwendung der Vorlage ist die einfachste Möglichkeit, loszulegen. Eine ausführliche Anleitung finden Sie unter Verwenden von Visual Studio zum Erstellen der ersten Vue.js-App.

Erstellen eines Vue.js Projekts mit ASP.NET Core und der Vue CLI

Vue.js stellt eine offizielle CLI für schnelle Gerüstprojekte bereit. Wenn Sie die CLI zum Erstellen Ihrer Anwendung verwenden möchten, führen Sie die Schritte in diesem Artikel aus, um Ihre Entwicklungsumgebung einzurichten.

Wichtig

Bei diesen Schritten wird davon ausgegangen, dass Sie bereits Erfahrung mit dem Vue.js Framework haben. Falls nicht, besuchen Sie Vue.js, um mehr über das Framework zu erfahren.

Erstellen eines neuen ASP.NET Core-Projekts

In diesem Beispiel verwenden Sie eine leere ASP.NET Core Application (C#). Sie können jedoch aus verschiedenen Projekten und Programmiersprachen wählen.

Erstellen eines leeren Projekts

• Öffnen Sie Visual Studio, und erstellen Sie ein neues Projekt.

  Wählen Sie in Visual Studio 2019 Erstellen eines neuen Projekts im Startfenster aus. Wenn das Startfenster nicht geöffnet ist, wählen Sie Datei>Startfensteraus. Geben Sie Web-Appein, wählen Sie C# als Sprache aus, wählen Sie anschließend ASP.NET Core Emptyund dann Nextaus. Benennen Sie auf dem nächsten Bildschirm das Projekt Client-App-, und wählen Sie dann Nextaus.

  Wählen Sie entweder das empfohlene Zielframework oder .NET 6 aus, und wählen Sie dann Createaus.

  Wenn die Projektvorlage ASP.NET Core-Webanwendung nicht vorhanden ist, installieren Sie zunächst die Workload ASP.NET und Webentwicklung und die Entwicklungsworkload .NET Core. Klicken Sie zum Installieren der Workloads auf den Link Visual Studio-Installer öffnen im linken Bereich des Dialogfelds Neues Projekt (wählen Sie Datei>Neu>Projekt aus). Das Visual Studio-Installationsprogramm wird gestartet. Wählen Sie die erforderlichen Arbeitslasten aus.

Konfigurieren der Projektstartdatei

• Öffnen Sie die Datei ./Startup.cs, und fügen Sie der Configure-Methode die folgenden Zeilen hinzu:

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

Installieren Sie die Vue CLI

Um das vue-cli npm-Modul zu installieren, öffnen Sie eine Eingabeaufforderung, und geben Sie npm install --g vue-cli oder npm install -g @vue/cli für Version 3.0 (derzeit in Der Betaversion) ein.

Erstellen eines Gerüsts für eine neue Clientanwendung mithilfe der Vue CLI

1. Wechseln Sie zur Eingabeaufforderung, und geben Sie als aktuelles Verzeichnis das Stammverzeichnis Ihres Projekts ein.

2. Geben Sie vue init webpack client-app ein, und führen Sie die Schritte aus, wenn Sie aufgefordert werden, weitere Fragen zu beantworten.

   Anmerkung

   Für .vue--Dateien müssen Sie webpack oder ein ähnliches Framework mit einem Ladeprogramm verwenden, um die Konvertierung durchzuführen. TypeScript und Visual Studio wissen nicht, wie .vue-Dateien kompiliert werden. Das gleiche gilt für die Bündelung; TypeScript weiß nicht, wie ES2015-Module (d. h. import- und export-Anweisungen) in eine einzelne endgültige .js Datei konvertiert werden, die im Browser geladen werden soll. Auch hier ist Webpack die beste Wahl. Um diesen Prozess in Visual Studio mithilfe von MSBuild zu steuern, müssen Sie mit einer Visual Studio-Vorlage beginnen. Derzeit gibt es keine ASP.NET Vorlage für Vue.js Entwicklung standardmäßig verfügbar.

Ändern der Webpack-Konfiguration zum Ausgeben der erstellten Dateien in wwwroot

• Öffnen Sie die Datei ./client-app/config/index.js, und passen Sie build.index und build.assetsRoot in den wwwroot-Pfad an.

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

Angeben des Projekts zum Erstellen der Client-App jedes Mal, wenn ein Build ausgelöst wird

1. Wechseln Sie in Visual Studio zu Projekt>Eigenschaften>Buildereignisse.

2. Geben Sie npm --prefix ./client-app run build in der Befehlszeile für Präbuildereignis ein.

Konfigurieren der Webpack-Ausgabemodulnamen

• Öffnen Sie die Datei ./client-app/build/webpack.base.conf.js, und fügen Sie der Ausgabeeigenschaft die folgenden Eigenschaften hinzu:

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

Hinzufügen der TypeScript-Unterstützung mit der Vue CLI

Diese Schritte erfordern vue-cli 3.0, das sich derzeit in der Betaversion befindet.

1. Wechseln Sie zur Eingabeaufforderung, und geben Sie als aktuelles Verzeichnis das Stammverzeichnis des Projekts ein.

2. Geben Sie vue create client-app ein, und wählen Sie anschließend Features manuell auswählen aus.

3. Wählen Sie TypeScript-aus, und wählen Sie dann weitere gewünschte Optionen aus.

4. Führen Sie die verbleibenden Schritte aus, und beantworten Sie die Fragen.

Konfigurieren eines Vue.js Projekts für TypeScript

1. Öffnen Sie die Datei ./client-app/tsconfig.json, und fügen Sie noEmit:true zu den Compileroptionen hinzu.

   Wenn Sie diese Option festlegen, vermeiden Sie, jedes Mal, wenn Sie in Visual Studio erstellen, Ihr Projekt zu überladen.

2. Erstellen Sie als Nächstes eine vue.config.js Datei in ./client-app/, und fügen Sie den folgenden Code hinzu.

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

   Der vorangehende Code konfiguriert webpack und legt den Ordner "wwwroot" fest.

Erstellen mit vue-cli 3.0

Ein unbekanntes Problem mit vue-cli 3.0 kann die Automatisierung des Buildprozesses verhindern. Jedes Mal, wenn Sie versuchen, den Ordner "wwwroot" zu aktualisieren, müssen Sie den Befehl npm run build im Client-App-Ordner ausführen.

Alternativ können Sie das vue-cli 3.0-Projekt als Vorabbuildereignis mit den ASP.NET Projekteigenschaften erstellen. Klicken Sie mit der rechten Maustaste auf das Projekt. Wählen Sie Eigenschaften, und fügen Sie die folgenden Befehle auf der Registerkarte Build im Textfeld Befehlszeile für Präbuildereignis ein.

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

Begrenzungen

• lang Attribut unterstützt nur JavaScript- und TypeScript-Sprachen. Die akzeptierten Werte sind: js, jsx, ts und tsx.

• lang Attribut funktioniert nicht mit Vorlagen- oder Stiltags.

• Das Debuggen von Skriptblöcken in VUE- Dateien wird aufgrund ihrer vorverarbeiteten Natur nicht unterstützt.

• TypeScript erkennt .vue Dateien nicht als Module. Sie benötigen eine Datei, die Code enthält, z. B. Folgendes, um TypeScript mitzuteilen, wie .vue Dateien aussehen (vue-cli 3.0-Vorlage enthält bereits diese Datei).

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

• Das Ausführen des Befehls npm run build als Pre-Build-Ereignis in den Projekteigenschaften funktioniert bei der Verwendung von vue-cli 3.0 nicht.

Verwandte Inhalte

• Vue – Leitfaden für die ersten Schritte.
• Vue-CLI-Projekt
• Webpack-Konfigurationsdokumentation.