ServBay

Deutsch

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Deutsch

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Erstellen und Ausführen eines Vue.js-Projekts mit ServBay ​

Vue.js ist ein beliebtes, progressives JavaScript-Framework zur Erstellung von Benutzeroberflächen. Es ist einfach zu erlernen, flexibel und leistungsstark – besonders geeignet für Single-Page-Anwendungen (SPA). ServBay ist eine leistungsstarke lokale Web-Entwicklungsumgebung, die Entwicklern bequemes Node.js-Hosting auf macOS und Windows bietet und sich damit als ideale Plattform für die Vue.js-Entwicklung eignet.

Diese Anleitung zeigt Ihnen Schritt für Schritt, wie Sie mit ServBay ein Vue.js-Projekt von Grund auf erstellen und sowohl im Entwicklungs- als auch Produktionsmodus darauf zugreifen.

Was ist Vue.js? ​

Vue.js ist ein progressives JavaScript-Framework für den Aufbau von Benutzeroberflächen. Im Gegensatz zu anderen großen Frameworks verfolgt Vue einen Ansatz der inkrementellen Entwicklung von unten nach oben. Die Kernbibliothek konzentriert sich ausschließlich auf die Ansichtsschicht, wodurch sie sich leicht erlernen und nahtlos in bestehende Projekte oder mit Drittanbieter-Bibliotheken integrieren lässt. Vue 3 ist die neueste Version mit zahlreichen Verbesserungen, darunter höhere Geschwindigkeit, geringerer Paketgröße und bessere TypeScript-Unterstützung.

Die wichtigsten Eigenschaften und Vorteile von Vue 3 ​

  • Composition API: Organisiert die Logik von Komponenten durch die Verwendung von Funktionen, sodass große Komponenten leichter wartbar und wiederverwendbar sind.
  • Performance-Steigerung: Vue 3 verwendet Proxy-Objekte für das Reaktivitätssystem und einen optimierten Virtual DOM-Algorithmus – das macht es deutlich schneller.
  • Kleineres Paket: Dank Tree-Shaking ist die Kernbibliothek schlanker und sorgt für schnellere Ladezeiten.
  • Verbesserte TypeScript-Unterstützung: Vue 3 bietet erweiterte Typdefinitionen – für ein nahtloses TypeScript-Entwickler-Erlebnis.
  • Optimierter Komponenten-Lebenszyklus: Neue Lifecycle-Hooks und die Setup-Funktion sorgen für klarere und besser handhabbare Komponenten-Logik.

Mit Vue 3 können Sie moderne, reaktionsschnelle Webanwendungen effizient entwickeln.

Ein Vue.js-Projekt mit der ServBay-Umgebung erstellen und ausführen ​

In diesem Artikel nutzen wir die Node.js-Integration von ServBay, um ein Vue.js-Projekt zu erstellen und auszuführen. Mithilfe der Webseiten-Funktion konfigurieren wir Webserver und steuern den lokalen Zugriff mithilfe von Reverse Proxy und statischem Dateidienst.

Voraussetzungen ​

Bevor Sie starten, stellen Sie sicher, dass folgende Vorbereitungen getroffen wurden:

  1. ServBay installiert: Die lokale ServBay-Entwicklungsumgebung ist auf Ihrem Rechner eingerichtet.
  2. Node.js-Paket installiert: Sie haben Node.js über die ServBay-Paketverwaltung installiert. Detaillierte Schritte finden Sie unter Node.js in ServBay installieren und nutzen.

Ein Vue.js-Projekt erstellen ​

  1. Projekt initialisieren

    Öffnen Sie Ihr Terminal. ServBay empfiehlt, Ihre Webseitenprojekte im Standardverzeichnis zu speichern. Navigieren Sie dorthin und initialisieren Sie ein neues Vue.js-Projekt mit dem Befehl npm create vue@latest. Mit @latest nutzen Sie immer die aktuellste Version des Vue CLI bzw. des create-vue-Tools, meist Vue 3.

    macOS:

    bash
    cd /Applications/ServBay/www
npm create vue@latest

    Windows:

    cmd
    cd C:\ServBay\www
npm create vue@latest

    Folgen Sie den Terminal-Anweisungen und geben Sie einen Projektnamen ein (empfohlen: servbay-vue-app). Wählen Sie die gewünschten Features wie TypeScript, Vue Router, Pinia etc. Beispielkonfiguration:

    bash
    ✔ Project name: … servbay-vue-app
✔ Add TypeScript? … No # Wählen Sie bei Bedarf Yes oder No
✔ Add JSX Support? … No # Wählen Sie bei Bedarf Yes oder No
✔ Add Vue Router for Single Page Application development? … Yes # Empfehlung: Yes
✔ Add Pinia for state management? … No # Wählen Sie bei Bedarf Yes oder No
✔ Add Vitest for Unit testing? … No # Wählen Sie bei Bedarf Yes oder No
✔ Add an End-to-End Testing Solution? … No # Wählen Sie bei Bedarf Yes oder No
✔ Add ESLint for code quality? … Yes # Empfehlung: Yes
✔ Add Prettier for code formatting? … Yes # Empfehlung: Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Wählen Sie bei Bedarf Yes oder No

  2. Abhängigkeiten installieren

    Nach der Initialisierung wechseln Sie in das neue Projektverzeichnis servbay-vue-app und installieren alle benötigten Pakete:

    bash
    cd servbay-vue-app
npm install

Beispielinhalt des Projekts anpassen (optional) ​

Um zu testen, ob Ihr Projekt korrekt läuft, können Sie die Datei src/App.vue bearbeiten und den Inhalt durch eine einfache "Hello ServBay!"-Ausgabe ersetzen.

Öffnen Sie src/App.vue und ersetzen Sie den Inhalt durch:

html
<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Dies ist eine Vue.js-App, die über ServBay läuft.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Entwicklungsumgebung einrichten (Reverse Proxy verwenden) ​

Im Entwicklungsmodus startet ein Vue-Projekt normalerweise einen lokalen Development-Server (auf Basis von Vite oder Webpack) mit Funktionen wie Hot Module Reloading (HMR). ServBay kann mithilfe eines Reverse Proxy eine lokale Domain auf die Adresse und den Port des Development-Servers weiterleiten.

  1. Development-Server starten

    Im Projekt-Root starten Sie den Development-Server. Geben Sie mit --port einen unbesetzten Port an (z. B. 8585):

    bash
    npm run dev -- --port 8585

    Im Terminal erscheint die Meldung, dass der Server auf dem gewünschten Port läuft, z. B. http://localhost:8585.

  2. ServBay-Webseite als Reverse Proxy konfigurieren

    Öffnen Sie die ServBay-Oberfläche und navigieren Sie zu den Webseiten-Einstellungen. Legen Sie eine neue Webseite mit dem Typ Reverse Proxy an:

    • Name: My first Vue dev site (oder eine andere aussagekräftige Bezeichnung)
    • Domain: servbay-vue-dev.servbay.demo (oder eine andere .servbay.demo-Domain)
    • Webseiten-Typ: Reverse Proxy
    • Reverse Proxy Ziel-IP: 127.0.0.1
    • Reverse Proxy Ziel-Port: 8585 (der beim Serverstart angegebene Port)

    Nach dem Speichern aktualisiert ServBay automatisch die Webserver-Konfiguration (Caddy oder Nginx) und leitet Anfragen an servbay-vue-dev.servbay.demo zum lokalen Server unter http://127.0.0.1:8585 weiter.

    Ausführlichere Schritte für die Node.js-Webseiten-Konfiguration finden Sie hier: Node.js-Entwicklungs-Webseite in ServBay hinzufügen.

  3. Zugriff im Entwicklermodus

    Stellen Sie sicher, dass der ServBay-Webserver läuft. Öffnen Sie Ihren Browser und rufen Sie die konfigurierte Domain https://servbay-vue-dev.servbay.demo auf.

    Da ServBay lokale Domains automatisch mit SSL-Zertifikaten (über die ServBay User CA oder ServBay Public CA) versieht, können Sie Ihr Entwicklungsprojekt sicher per HTTPS öffnen – fast wie im echten Produktionsbetrieb. Mehr zu SSL und Zertifikaten: SSL-Zertifikat für Webseiten in ServBay konfigurieren.

    Nun sollte Ihre Vue-App im Entwicklermodus angezeigt werden, und Codeänderungen werden dank Hot Reload sofort sichtbar.

Produktions-Build erstellen und bereitstellen (statischer Dateidienst) ​

Zum Live-Stellen Ihres fertigen Vue.js-Projekts muss ein optimierter Produktions-Build erzeugt werden. Dieser besteht aus statischen Dateien (HTML, CSS, JavaScript), die Sie mit ServBay als statische Website bereitstellen können.

  1. Produktions-Build erstellen

    Im Projektverzeichnis führen Sie diesen Befehl für den Build aus:

    bash
    npm run build

    Das Build-Skript generiert eine Sammlung optimierter, gebündelter Dateien im Ordner dist im Projekt-Root.

  2. Statischen Dateidienst einrichten

    In ServBay gehen Sie in der Oberfläche zu den Webseiten-Einstellungen und legen eine neue Webseite mit Typ statisch an:

    • Name: My first Vue production site (oder eine andere Bezeichnung)
    • Domain: servbay-vue-prod.servbay.demo (oder eine andere .servbay.demo-Domain)
    • Webseiten-Typ: statisch
    • Webseiten-Root-Verzeichnis: Absoluter Pfad zum dist-Ordner Ihres Projekts:
      • macOS: /Applications/ServBay/www/servbay-vue-app/dist
      • Windows: C:\ServBay\www\servbay-vue-app\dist

    Nach dem Speichern liefert ServBay die statischen Dateien im dist-Ordner direkt aus.

  3. Zugriff auf die Produktionsversion

    Stellen Sie sicher, dass der ServBay-Webserver läuft. Öffnen Sie Ihren Browser und rufen Sie die konfigurierte Produktions-Domain https://servbay-vue-prod.servbay.demo auf.

    Sie sehen nun die optimierte Produktionsversion Ihrer Vue-App – für schnellstmögliche Ladezeiten. Dank Custom Domains und automatischer SSL-Unterstützung können Sie Ihren Produktionsstand lokal sicher ausprobieren.

Hinweise ​

  • Port-Konflikte: Falls der Port 8585 (oder ein anderer gewählter Port) bereits durch ein anderes Programm belegt ist, schlägt npm run dev fehl. Wählen Sie einen freien Port und passen Sie die ServBay-Reverse-Proxy-Konfiguration entsprechend an.
  • Status des ServBay-Webservers: Der Webserver (Caddy oder Nginx, je nach ServBay-Konfiguration) muss laufen, damit Sie die Webseite per Domain erreichen können.
  • Domain-Weiterleitung: ServBay richtet die lokalen .servbay.demo-Domains automatisch auf 127.0.0.1. Für andere Domains könnten Sie die hosts-Datei manuell bearbeiten oder das ServBay Hosts Manager-Tool nutzen, um eine korrekte lokale Auflösung zu gewährleisten.

Fazit ​

Mit ServBay richten Sie unter macOS und Windows bequem eine lokale Node.js-Umgebung ein, um Vue.js-Projekte zu entwickeln und produktiv bereitzustellen. Dank der Webseiten-Funktion können Sie Reverse Proxy und statischen Dateidienst rasch konfigurieren, individuelle Domains und automatische SSL-Zertifikate genießen und so Ihren lokalen Entwicklungs- und Deployment-Workflow enorm vereinfachen.