Schnellstart: Erstellen eines Vue.js Projekts

In dieser Schnellstartanleitung erstellen und ausführen Sie eine Basis-Vue.js Front-End-Webanwendung. Dieser Artikel enthält eine 5-10-minütige Einführung in die Visual Studio integrierte Entwicklungsumgebung (Integrated Development Environment, IDE).

Voraussetzungen

Bereiten Sie Ihre Konfiguration mit den folgenden Voraussetzungen vor:

Erstellen Ihrer Vue-App

Erstellen Sie eine Vue.js Web-App, indem Sie die folgenden Schritte ausführen:

  1. Wählen Sieim Visual Studio Startfenster (>) die Option "Neues Projekt erstellen" aus.

    Screenshot, der zeigt, wie Die Option

    Screenshot, der zeigt, wie Die Option

  2. Geben Sie im Dialogfeld " Neues Projekt erstellen " im Suchfeld "Vue " ein. Wählen Sie die Vue-App-Vorlage für JavaScript oder TypeScript und dann "Weiter" aus.

    Screenshot, der zeigt, wie Sie eine Vue-Vorlage für JavaScript oder TypeScript auswählen.

    Screenshot, der zeigt, wie Sie eine Vue-Vorlage für JavaScript oder TypeScript auswählen.

    In Visual Studio 2022, Version 11 und höher, wird der Vorlagenname standalone JavaScript Vue Project in Vue App geändert.

  3. Geben Sie einen Namen für Ihr Projekt und Ihre Projektmappe ein, und wählen Sie "Erstellen" aus.

Warten Sie, bis Visual Studio Ihr neues Projekt erstellt hat.

Anzeigen der Projekteigenschaften

Mit den Standardprojekteinstellungen können Sie das Projekt erstellen und debuggen.

Wenn Sie Einstellungen ändern möchten, führen Sie die folgenden Schritte aus:

  1. Klicken Sie mit der rechten Maustaste auf das Projekt in Projektmappen-Explorer, und wählen Sie "Eigenschaften" aus.

  2. Wählen Sie im Projekteigenschaftenbereich "Debuggen", "Linting", " Erstellen" oder "Bereitstellen" aus, um die entsprechenden Eigenschaften anzuzeigen.

Verwenden Sie für die Debuggerkonfiguration die launch.json Datei.

Anmerkung

In launch.json der Debuggerkonfigurationsdatei werden die Starteinstellungen gespeichert, die der Startaktion in der Debugsymbolleiste zugeordnet sind. Die launch.json Datei muss sich unter dem .vscode Ordner in Ihrem Projekt befinden.

Erstellen Ihres Projekts

Um Ihr neues Projekt zu erstellen, wählen Sie Erstellen>Projektmappe erstellen aus.

Starten Sie Ihr Projekt

Wählen Sie F5 aus, oder verwenden Sie die Startaktion am oberen Rand des Fensters.

Das Projekt öffnet eine Eingabeaufforderung mit dem folgenden Text (oder ähnlich):

VITE v4.4.9 ready in 780 ms

Anmerkung

Überprüfen Sie die Konsolenausgabe auf Nachrichten, z. B. Anweisungen zum Aktualisieren Ihrer Version von Node.js.

Wenn der Prozess erfolgreich verläuft, wird die Basis-Vue.js App geöffnet.

Nächster Schritt