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

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

Mit den folgenden Features wird die Entwicklung von Vue.js-Anwendungen in Visual Studio unterstützt:

• Unterstützung für Skript-, Stil- und Vorlagenblöcken in VUE-Dateien
• Erkennung des lang-Attributs in VUE-Dateien
• Vorlagen für Vue.js-Projekte und -Dateien

Voraussetzungen

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

  Wichtig

  Für diesen Artikel sind Features erforderlich, die nur in Visual Studio 2017 Version 15.8 verfügbar sind.

  Falls die erforderliche Version noch nicht installiert ist, installieren Sie Visual Studio 2019.

  Wenn Sie die Workload installieren müssen, Visual Studio aber bereits besitzen, navigieren Sie zu Tools>Tools und Features abrufen… . Dadurch wird der Visual Studio-Installer geöffnet. Klicken Sie auf die Workload Node.js-Entwicklung und anschließend auf Ändern.

• Zum Erstellen des ASP.NET Core-Projekts müssen die Workloads „ASP.NET und Webentwicklung“ und „Plattformübergreifende .NET Core-Entwicklung“ installiert sein.

• Die Node.js-Laufzeit muss installiert sein.

  Wenn sie nicht bereits installiert ist, installieren Sie die LTS-Version über die Node.js-Website. Im Allgemeinen erkennt Visual Studio die installierte Node.js-Runtime automatisch. Wenn eine installierte Runtime nicht erkannt wird, können Sie Ihr Projekt so konfigurieren, dass es auf der Eigenschaftenseite auf die installierte Runtime verweist. (Klicken Sie nach dem Erstellen eines Projekts mit der rechten Maustaste auf den Projektknoten, und wählen Sie Eigenschaften aus.)

Erstellen eines Vue.js-Projekts unter Verwendung von Node.js

Ein neues Projekt können Sie mithilfe der neuen Vue.js-Vorlage erstellen. Die Verwendung der Vorlage ist die einfachste Möglichkeit für den Einstieg. Eine ausführliche Anleitung finden Sie unter Use Visual Studio to create your first Vue.js app (Verwenden von Visual Studio zum Erstellen der ersten Vue.js-App).

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

Vue.js stellt eine offizielle Befehlszeilenschnittstelle zum schnellen Aufbau eines Gerüst für Projekte bereit. Wenn Sie Ihre Anwendung mit der Befehlszeilenschnittstelle erstellen möchten, verwenden Sie die Anleitung in diesem Artikel zum Einrichten der Entwicklungsumgebung.

Erstellen eines neuen ASP.NET Core-Projekts

Für dieses Beispiel wird eine leere ASP.NET Core-Anwendung (C#) verwendet. 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 im Startfenster von Visual Studio 2019 die Option Neues Projekt erstellen aus. Wenn das Startfenster nicht geöffnet ist, klicken Sie auf Datei >Startfenster. Geben Sie Web-App ein, wählen Sie als Sprache C# und anschließend ASP.NET Core – leer aus, und klicken Sie dann auf Weiter. Geben Sie dem Projekt im nächsten Bildschirm den Namen Client-App, und klicken Sie auf Weiter.

  Wählen Sie entweder das empfohlene Zielframework oder .NET 6 aus, und klicken Sie dann auf Erstellen.

  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). Der Visual Studio-Installer wird gestartet. Wählen Sie die erforderlichen Workloads aus.

Konfigurieren der Startdatei des Projekts

• Ö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 der Vue-Befehlszeilenschnittstelle

Öffnen Sie zum Installieren des NPM-Moduls vue-cli eine Eingabeaufforderung, und geben Sie npm install --g vue-cli oder npm install -g @vue/cli für Version 3.0 (derzeit als Betaversion) ein.

Erstellen eines Gerüsts für eine neue Clientanwendung mit der Vue-Befehlszeilenschnittstelle

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 entsprechenden Schritte aus, wenn Sie aufgefordert werden, weitere Fragen zu beantworten.

   Hinweis

   Bei VUE-Dateien müssen Sie Webpack oder ein ähnliches Framework mit einem Ladeprogramm für die Konvertierung verwenden. TypeScript und Visual Studio ist nicht bekannt, wie .vue-Dateien kompiliert werden. Das Gleiche gilt für die Bündelung. TypeScript ist nicht bekannt, wie ES2015-Module (d. h. import- und export-Anweisungen) in eine einzige endgültige .js-Datei zum Laden im Browser konvertiert werden. Auch in diesem Fall ist Webpack die beste Wahl. Damit dieser Vorgang innerhalb von Visual Studio mithilfe von MSBuild ausgeführt werden kann, müssen Sie mit einer Visual Studio-Vorlage beginnen. Derzeit ist keine ASP.NET-Vorlage für die Vue.js-Entwicklung im Lieferumfang enthalten.

Ändern der Webpack-Konfiguration für die Ausgabe der kompilierten Dateien in wwwroot

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

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

Angeben des Projekts, um die Client-App bei jedem Auslösen eines Builds zu erstellen

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 von Namen für Webpack-Ausgabemodule

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

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

Erweitern der Vue-Befehlszeilenschnittstelle um TypeScript-Unterstützung

Für diese Schritte ist vue-cli 3.0 erforderlich, das derzeit als Betaversion vorliegt.

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 Manually select features (Features manuell auswählen) aus.

3. Wählen Sie zunächst Typescript und anschließend 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 den Compileroptionen hinzu.

   Durch Festlegen dieser Option verhindern Sie, dass Ihr Projekt mit jedem Kompilieren in Visual Studio überladen wird.

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

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

   Mit dem obigen Code wird Webpack konfiguriert und der Ordner „wwwroot“ festgelegt.

Kompilieren mit vue-cli 3.0

Die Automatisierung des Buildprozesses wird ggf. durch einen unbekannten Fehler bei vue-cli 3.0 verhindert. Jedes Mal, wenn Sie den Ordner „wwwroot“ aktualisieren, müssen Sie für den Ordner „client-app“ den Befehl npm run build ausführen.

Alternativ können Sie das vue-cli 3.0-Projekt mithilfe der ASP.NET-Projekteigenschaften als Präbuildereignis 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 ../

Einschränkungen

• Das Attribut lang unterstützt nur die Sprachen JavaScript und TypeScript. Zulässige Werte: js, jsx, ts und tsx.

• Das Attribut lang kann nicht mit Template- oder Style-Tags verwendet werden.

• Das Debuggen von Skriptblöcken in VUE-Dateien wird aufgrund der Vorverarbeitung nicht unterstützt.

• TypeScript erkennt VUE-Dateien nicht als Module. Sie benötigen eine Datei, die Code wie etwa den folgenden enthält, um TypeScript mitzuteilen, wie VUE-Dateien aussehen (diese Datei ist in der vue-cli 3.0-Vorlage bereits enthalten).

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

• Der Befehl npm run build kann bei Verwendung von vue-cli 3.0 nicht als Präbuildereignis für die Projekteigenschaften ausgeführt werden.

Zugehöriger Inhalt

• Erste Schritte – Leitfaden für Vue.
• [Vue-CLI-Projekt]
• Dokumentation zur Konfiguration von Webpack.