# Nodejs

Das Verwalten mehrerer Versionen von Nodejs mit ServBay ist sehr einfach. Wir werden dies durch die Installation von Nodejs 22 veranschaulichen.

# Nodejs 22 installieren

Klicken Sie in der linken Seitenleiste auf Dienste, und Sie können mehrere von ServBay bereitgestellte Nodejs-Versionen sehen.

Nodejs 22 installieren

Finden Sie die Zeile, in der Nodejs 22 steht, klicken Sie auf die grüne Download-Schaltfläche rechts und Nodejs 22 wird in nur wenigen Sekunden heruntergeladen und installiert.

# Installieren Sie yarn und pnpm

Nachdem Nodejs 22 installiert ist, überprüfen wir es:

Nodejs 22 Version

Vom Terminal-Ausgabe können wir sehen, dass Nodejs 22 installiert wurde.

Dann installieren wir yarn und pnpm über Corepack:

$ corepack enable yarn
$ yarn -v
1.22.22
$ corepack enable pnpm
$ pnpm -v
9.1.0
1
2
3
4
5
6

Wir können sehen, dass yarn und pnpm installiert wurden.

# Vue 3 Beispiel

Nachdem Nodejs und yarn/pnpm installiert sind, können Sie mit der Front-End-Entwicklung beginnen. Als nächstes werden wir Vue 3 als Beispiel verwenden.

# Vue 3 Gerüst

Zuerst führen wir das Vue 3 Scaffold aus, um ein Vue 3 Projekt zu generieren.

Vue 3 Gerüst

# Installation der Abhängigkeiten mit yarn

Dann betreten Sie das Projektverzeichnis:

$ cd hello
1

Führen Sie yarn aus, um die Abhängigkeitspakete zu installieren:

Yarn Install Deps

# Starten Sie den Entwicklungsserver

Führen Sie dann yarn dev aus, um den lokalen Entwicklungsserver zu starten:

$ yarn dev
1

Nachdem der Server erfolgreich gestartet ist, werden die folgenden Informationen angezeigt:

Yarn Dev Info

Zu diesem Zeitpunkt, besuchen Sie http://localhost:5173 in Ihrem Browser, und Sie werden die standardmäßig generierte Startseite von Vue 3 sehen:

Vue 3 Standard-Homepage

# Quellcode bearbeiten

Probieren wir aus, "You did it!" in "Hallo Welt!" zu ändern und schauen wir mal, was passiert:

Vue 3 Hallo Welt Quellcode

Nach der Änderung des Codes wird Vue 3 die Seite automatisch aktualisieren, damit wir die modifizierte Website-Homepage sehen können:

Vue 3 Hallo Welt Seite

Jetzt sind Sie bereit für die Front-End-Entwicklung mit Nodejs.

Last Updated: 5/12/2024