Schnellstart: Erstellen Ihrer ersten Vue.js-App mit Visual Studio

Mithilfe dieser fünf- bis zehnminütigen Einführung in die integrierte Entwicklungsumgebung (Integrated, Development Environment, IDE) von Visual Studio können Sie eine einfache Vue.js-Webanwendung erstellen und ausführen.

Voraussetzungen

  • Sie müssen Visual Studio und die Workload für die Node.js-Entwicklung installiert haben.

    Wenn Sie Visual Studio 2019 noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

    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.

    Node.js workload in VS Installer

  • Die Node.js-Laufzeit muss installiert sein.

    Sofern nicht bereits geschehen, empfehlen wir Ihnen, die LTS-Version von der Node.js-Website zu installieren, um optimale Kompatibilität mit externen Frameworks und Bibliotheken zu gewährleisten. Node.js wurde für 32-Bit- und 64-Bit-Architekturen entwickelt. Die Node.js-Tools in Visual Studio, die in der Node.js-Workload enthalten sind, unterstützen beide Versionen. Es wird nur eine Version benötigt, und das Node.js-Installationsprogramm unterstützt zu jedem Zeitpunkt nur jeweils eine Installation.

    Im Allgemeinen erkennt Visual Studio die installierte Node.js-Runtime automatisch. Wird die installierte Runtime nicht erkannt, können Sie das Projekt so konfigurieren, dass auf der Eigenschaftenseite auf die installierte Runtime verwiesen wird (klicken Sie hierzu nach dem Erstellen des Projekts mit der rechten Maustaste auf den Projektknoten, wählen Sie Eigenschaften aus, und legen Sie den Node.exe-Pfad fest). Sie können eine globale Installation von Node.js verwenden oder in jedem Ihrer Node.js-Projekte den Pfad zu einem lokalen Interpreter angeben.

Erstellen eines Projekts

Zunächst müssen Sie ein Projekt für die Vue.js-Webanwendung erstellen.

  1. Wenn die Node.js-Runtime nicht bereits installiert ist, installieren Sie die LTS-Version über die Node.js-Website.

    Weitere Informationen finden Sie im Abschnitt mit den Voraussetzungen.

  2. Öffnen Sie Visual Studio.

  3. Erstellen Sie ein neues Projekt.

    Drücken Sie ESC, um das Startfenster zu schließen. Geben Sie STRG+Q ein, um das Suchfeld zu öffnen, geben Sie Grundlegende Vue.js ein, und wählen Sie dann Grundlegende Vue.js-Webanwendung (entweder JavaScript oder TypeScript) aus. Geben Sie im Dialogfeld, das nun angezeigt wird, den Namen basic-vuejs ein, und wählen Sie dann Erstellen aus.

    Vue.js template

    Wenn die Projektvorlage Grundlegende Vue.js-Webanwendung nicht angezeigt wird, müssen Sie die Workload für die Node.js-Entwicklung hinzufügen. Ausführliche Anweisungen dazu finden Sie in den Voraussetzungen.

    Visual Studio erstellt daraufhin das neue Projekt. Das neue Projekt wird im Projektmappen-Explorer geöffnet (im rechten Bereich).

  4. Überprüfen Sie während der Installation des npm-Pakets, das für die Anwendung erforderlich ist, im Fenster „Ausgabe“ (unterer Bereich) den Fortschritt.

  5. Öffnen Sie im Projektmappen-Explorer den npm-Knoten, und stellen Sie sicher, dass alle aufgeführten npm-Pakete installiert wurden.

    Wenn Pakete fehlen (Ausrufezeichensymbol), klicken Sie mit der rechten Maustaste auf den NPM-Knoten, und wählen Sie Fehlende NPM-Pakete installieren aus.

Durchsuchen der IDE

  1. Sehen Sie sich den Projektmappen-Explorer im rechten Bereich an.

    Vue.js solution

    • Ihr Projekt wird fettgedruckt dargestellt, mit dem Namen, den Sie im Dialogfeld Neues Projekt festgelegt haben. Auf dem Datenträger wird dieses Projekt im Projektordner durch eine NJSPROJ-Datei dargestellt.

    • Auf der oberen Ebene finden Sie eine Projektmappe, die standardmäßig denselben Namen hat wie Ihr Projekt. Eine Projektmappe, die auf dem Datenträger durch eine SLN-Datei dargestellt wird, ist ein Container für mindestens ein zugehöriges Projekt.

    • Der npm-Knoten zeigt alle installierten npm-Pakete an. Sie können mit der rechten Maustaste darauf klicken, um über ein Dialogfeld npm-Pakete zu suchen und zu installieren.

  2. Wenn Sie npm-Pakete oder Node.js-Befehle über eine Eingabeaufforderung installieren möchten, klicken Sie mit der rechten Maustaste auf den Projektknoten, und klicken Sie anschließend auf Eingabeaufforderung hier öffnen.

Hinzufügen einer Vue-Datei zum Projekt

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf einen beliebigen Ordner, z. B. den Ordner src/components, und wählen Sie anschließend Hinzufügen>Neues Element aus.

    Wenn nicht alle Elementvorlagen angezeigt werden, wählen Sie Alle Vorlagen anzeigen und dann die Elementvorlage aus.

  2. Wählen sie entweder JavaScript Vue-Einzeldateikomponente oder TypeScript Vue-Einzeldateikomponente aus, und klicken Sie anschließend auf Hinzufügen.

    Visual Studio fügt die neue Datei zum Projekt hinzu.

Erstellen des Projekts

  1. Wählen Sie als Nächstes Erstellen>Projektmappe erstellen aus, um das Projekt zu erstellen.

  2. Überprüfen Sie die Buildergebnisse im Ausgabenfenster, und wählen Sie Build in der Liste Ausgabe anzeigen von aus.

Die JavaScript-Projektvorlage „Vue.js“ (und ältere Versionen der TypeScript-Vorlage) verwenden das npm-Skript build, indem sie ein Postbuildereignis konfigurieren. Wenn Sie diese Einstellung ändern möchten, öffnen Sie die Projektdatei ( <Projektname>.njsproj) über den Windows-Explorer, und suchen Sie nach der folgenden Codezeile:

<PostBuildEvent>npm run build</PostBuildEvent>

Ausführen der Anwendung

  1. Drücken Sie STRG+F5, oder klicken Sie auf Debuggen > Ohne Debuggen starten, um die Anwendung auszuführen.

    In der Konsole wird Ihnen die Meldung Development Server wird gestartet angezeigt.

    Anschließend wird die App in einem Browser geöffnet.

    Wenn die ausgeführte App nicht angezeigt wird, aktualisieren Sie die Seite.

    Vue.js app running in the browser

  2. Schließen Sie den Webbrowser.

Damit haben Sie den Schnellstart erfolgreich abgeschlossen. Wir hoffen, dass Sie etwas über die Visual Studio-IDE mit Vue.js gelernt haben. Wenn Sie mehr über deren Funktionen erfahren möchten, können Sie mit einem Tutorial im Inhaltsverzeichnis mit dem Abschnitt Tutorials fortfahren.

Nächste Schritte