Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
In dieser 5-10-minütigen Einführung in die integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) von Visual Studio erstellen und führen Sie eine einfache Vue.js Webanwendung aus.
Voraussetzungen
Sie müssen Visual Studio und die Node.js Entwicklungsarbeitslast installiert haben.
Wenn Sie Visual Studio 2019 noch nicht installiert haben, wechseln Sie zur Visual Studio-Downloadseite , um es kostenlos zu installieren.
Wenn Sie die Workload installieren müssen, aber bereits über Visual Studio verfügen, gehen Sie zu Tools>Tools und Features abrufen..., wodurch das Visual Studio-Installationsprogramm geöffnet wird. Wählen Sie die Node.js Entwicklungsarbeitsauslastung aus, und wählen Sie dann "Ändern" aus.
Sie müssen die Node.js Laufzeit installiert haben.
Wenn sie nicht installiert ist, empfehlen wir, die LTS-Version von der Node.js Website zu installieren, um optimale Kompatibilität mit externen Frameworks und Bibliotheken zu erzielen. Node.js ist für 32-Bit- und 64-Bit-Architekturen erstellt. Die Node.js-Tools in Visual Studio, die in der Node.js Workload enthalten sind, unterstützen beide Versionen. Nur eine ist erforderlich, und das Node.js Installationsprogramm unterstützt nur jeweils eine Installation.
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, wählen Sie "Eigenschaften" aus, und legen Sie den Node.exe Pfad fest). Sie können eine globale Installation von Node.js verwenden oder den Pfad zu einem lokalen Dolmetscher in jedem Ihrer Node.js Projekte angeben.
Erstellen eines Projekts
Zunächst erstellen Sie ein Vue.js Webanwendungsprojekt.
Wenn die Node.js Laufzeit noch nicht installiert ist, installieren Sie die LTS-Version von der Node.js-Website .
Weitere Informationen finden Sie unter den Voraussetzungen.
Öffnen Sie Visual Studio.
Erstelle 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 "Basic Vue.js" ein, und wählen Sie dann "Basic" Vue.js Webanwendung (entweder JavaScript oder TypeScript) aus. Geben Sie im daraufhin angezeigten Dialogfeld den Namen "basic-vuejs" ein, und wählen Sie dann "Erstellen" aus.
Wenn die Projektvorlage "Basic Vue.js Webanwendung " nicht angezeigt wird, müssen Sie die Node.js Entwicklungsarbeitsauslastung hinzufügen. Ausführliche Anweisungen finden Sie unter den Voraussetzungen.
Visual Studio erstellt das neue Projekt. Das neue Projekt wird im Projektmappen-Explorer (rechtem Bereich) geöffnet.
Überprüfen Sie das Ausgabefenster (unterer Bereich), um den Fortschritt bei der Installation der npm-Pakete zu finden, die für die Anwendung erforderlich sind.
Öffnen Sie im Projektmappen-Explorer den npm-Knoten , und stellen Sie sicher, dass alle aufgelisteten npm-Pakete installiert sind.
Wenn pakete fehlen (Ausrufezeichensymbol), können Sie mit der rechten Maustaste auf den npm-Knoten klicken und " Fehlende npm-Pakete installieren" auswählen.
IDE erkunden
Sehen Sie sich den Projektmappen-Explorer im rechten Bereich an.
Fett hervorgehoben ist Ihr Projekt unter Verwendung des namens, den Sie im Dialogfeld "Neues Projekt " angegeben haben. Auf der Festplatte wird dieses Projekt durch eine njsproj-Datei in Ihrem Projektordner dargestellt.
Auf der obersten Ebene ist eine Lösung, die standardmäßig denselben Namen wie Ihr Projekt hat. Eine Lösung, dargestellt durch ein . sln-Datei auf dem Datenträger, ist ein Container für ein oder mehrere verwandte Projekte.
Der npm-Knoten zeigt alle installierten npm-Pakete an. Sie können mit der rechten Maustaste auf den npm-Knoten klicken, um mithilfe eines Dialogfelds nach npm-Paketen zu suchen und zu installieren.
Wenn Sie npm-Pakete installieren oder Node.js Befehle an einer Eingabeaufforderung ausführen möchten, klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie hier die Eingabeaufforderung öffnen aus.
Hinzufügen einer VUE-Datei zum Projekt
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf einen beliebigen Ordner, z. B. den Ordner "src/components", und wählen Sie dann "Neues Element> aus.
Wenn nicht alle Elementvorlagen angezeigt werden, wählen Sie Alle Vorlagen anzeigen und dann die Elementvorlage aus.
Wählen Sie entweder javaScript Vue Single File Component oder TypeScript Vue Single File Component aus, und klicken Sie dann auf Hinzufügen.
Visual Studio fügt die neue Datei dem Projekt hinzu.
Erstellen des Projekts
Wählen Sie als Nächstes "Build>Lösung erstellen" aus, um das Projekt zu erstellen.
Überprüfen Sie das Ausgabefenster, um die Buildergebnisse anzuzeigen, und wählen Sie Erstellen aus der Liste 'Ausgabe anzeigen' aus.
Die JavaScript Vue.js Projektvorlage (und ältere Versionen der TypeScript-Vorlage) verwenden das build npm-Skript, indem ein Post-Build-Ereignis konfiguriert wird. Wenn Sie diese Einstellung ändern möchten, öffnen Sie die Projektdatei (<projectname.njsproj>) aus Dem Windows-Explorer, und suchen Sie diese Codezeile:
<PostBuildEvent>npm run build</PostBuildEvent>
Ausführen der Anwendung
Drücken Sie STRG+F5 (oder Debugstart ohne Debugging>), um die Anwendung auszuführen.
In der Konsole wird die Meldung "Starting Development Server" angezeigt.
Anschließend wird die App in einem Browser geöffnet.
Wenn die ausgeführte App nicht angezeigt wird, aktualisieren Sie die Seite.
Schließen Sie den Webbrowser.
Herzlichen Glückwunsch zum Abschließen dieser Schnellstartanleitung! Wir hoffen, dass Sie etwas über die Verwendung der Visual Studio-IDE mit Vue.jsgelernt haben. Wenn Sie tiefer in seine Funktionen eintauchen möchten, fahren Sie mit einem Lernprogramm im Abschnitt "Lernprogramme " des Inhaltsverzeichnisses fort.