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

Vue.js ist ein beliebtes, progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es ist leicht zu erlernen, flexibel und leistungsstark, insbesondere für die Entwicklung von Single Page Applications (SPAs). ServBay als leistungsfähige lokale Web-Entwicklungsumgebung bietet Entwicklern eine komfortable Node.js-Unterstützung und ist damit die ideale Plattform für Vue.js-Entwicklung auf macOS.

In dieser Anleitung zeigen wir Ihnen ausführlich, wie Sie mit der integrierten Umgebung von ServBay ein Vue.js-Projekt von Grund auf erstellen und sowohl im Entwicklungs- als auch im Produktionsmodus über ServBay 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 Bottom-up-Ansatz für eine schrittweise Integration. Die Kernbibliothek konzentriert sich nur auf die Präsentationsschicht, was den Einstieg einfach macht und eine reibungslose Integration mit anderen Bibliotheken oder bestehenden Projekten ermöglicht. Vue 3 ist die neueste Version und bietet zahlreiche Verbesserungen, darunter höhere Performance, kleinere Paketgröße und eine optimierte TypeScript-Unterstützung.

Hauptmerkmale und Vorteile von Vue 3

• Composition API: Ermöglicht die Organisation von Logik über Funktionen (“Function Composition“), sodass sich selbst große Komponenten modular, wartbar und wiederverwendbar strukturieren lassen.
• Leistungssteigerung: Vue 3 nutzt Proxy-Objekte für das reaktive System und optimiert den virtuellen DOM-Algorithmus, was zu merklich mehr Performance führt.
• Kleinere Bundle-Größe: Dank Tree-Shaking ist der Kern von Vue 3 noch schlanker und lädt schneller.
• Bessere TypeScript-Unterstützung: Vue 3 bietet umfangreiche TypeScript-Typdefinitionen, was die Entwicklung von Vue-Anwendungen mit TypeScript besonders angenehm macht.
• Verbesserter Komponenten-Lebenszyklus: Neue Lebenszyklus-Hooks und die Setup-Funktion sorgen für klarere, besser verwaltbare Komponentenlogik.

Mit Vue 3 können Entwickler moderne, reaktionsschnelle Webanwendungen effizienter denn je erstellen.

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

Im Folgenden verwenden wir die von ServBay bereitgestellte Node.js-Umgebung, um ein Vue.js-Projekt zu erstellen und zu betreiben. Wir nutzen hierfür die Funktion Websites von ServBay, um den Webserver zu konfigurieren und das Projekt lokal mittels Reverse Proxy oder statischer Dateiserver zugänglich zu machen.

Voraussetzungen

Bevor Sie beginnen, stellen Sie bitte sicher, dass Folgendes vorbereitet ist:

1. ServBay installiert: ServBay sollte auf Ihrem macOS als lokale Entwicklungsumgebung installiert sein.
2. Node.js-Paket installiert: Über das Paketmanagement von ServBay sollte Node.js installiert sein. Die genaue Anleitung finden Sie unter Node.js in ServBay installieren und nutzen.

Ein neues Vue.js-Projekt anlegen

1. Projekt initialisieren

   Öffnen Sie zunächst Ihr Terminal. ServBay empfiehlt, Webprojekte im Verzeichnis /Applications/ServBay/www zu speichern. Wechseln Sie ins Verzeichnis und initialisieren Sie ein neues Vue.js-Projekt mit:

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

   Folgen Sie den Anweisungen im Terminal für den Projektnamen (empfohlen: servbay-vue-app) und wählen Sie je nach Bedarf, ob Sie TypeScript, Vue Router, Pinia usw. hinzufügen möchten. Beispielkonfiguration:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Nach Bedarf Yes oder No wählen
   ✔ Add JSX Support? … No # Nach Bedarf Yes oder No wählen
   ✔ Add Vue Router for Single Page Application development? … Yes # Empfehlung: Yes
   ✔ Add Pinia for state management? … No # Nach Bedarf Yes oder No wählen
   ✔ Add Vitest for Unit testing? … No # Nach Bedarf Yes oder No wählen
   ✔ Add an End-to-End Testing Solution? … No # Nach Bedarf Yes oder No wählen
   ✔ 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 # Nach Bedarf Yes oder No wählen

2. Abhängigkeiten installieren

   Nach der Initialisierung wechseln Sie ins neu erstellte Verzeichnis servbay-vue-app und installieren alle benötigten Pakete mit:

   cd servbay-vue-app
   npm install

Beispieldatei anpassen (optional)

Um sicherzustellen, dass Ihr Projekt erfolgreich läuft, können Sie die Datei src/App.vue anpassen und den Standardinhalt durch eine einfache "Hello ServBay!"-Ausgabe ersetzen.

Öffnen Sie dazu die Datei src/App.vue im Projektverzeichnis und ersetzen Sie den Inhalt durch:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Dies ist eine mit ServBay ausgeführte Vue.js-App.</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 (mit Reverse Proxy)

Im Entwicklungsmodus startet eine Vue-App normalerweise einen lokalen Entwicklungsserver (in der Regel per Vite oder Webpack), der Hot Module Replacement (HMR) und weitere Entwicklungsfunktionen bereitstellt. ServBay kann über Reverse Proxy einen lokalen Domainnamen auf diese Adresse und Port des Entwicklungsservers abbilden.

1. Entwicklungsserver starten

   Im Projektverzeichnis führen Sie folgenden Befehl aus, um den Dev-Server zu starten. Legen Sie mit --port einen freien Port (z. B. 8585) fest:

   npm run dev -- --port 8585

   Im Terminal erscheint eine Bestätigung, dass der Server läuft, z.B. unter http://localhost:8585.

2. Reverse Proxy von ServBay konfigurieren

   Öffnen Sie die ServBay-Oberfläche und navigieren Sie zu den Websites. Fügen Sie eine neue Website hinzu und wählen Sie als Typ Reverse Proxy:

   • Name: My first Vue dev site (oder ein beliebiger, gut erkennbarer Name)
   • Domain: servbay-vue-dev.servbay.demo (oder eine andere .servbay.demo-Domain Ihrer Wahl)
   • Websitetyp: Reverse Proxy
   • Ziel-IP für Proxy: 127.0.0.1
   • Ziel-Port für Proxy: 8585 (identisch mit dem beim Dev-Server gewählten Port)

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

   Eine ausführlichere Anleitung zur Einrichtung eines Node.js-Entwicklungsprojekts in ServBay finden Sie unter Node.js Entwicklungswebsite in ServBay hinzufügen.

3. Zugriff im Entwicklungsmodus

   Stellen Sie sicher, dass der Webserver von ServBay ausgeführt wird. Öffnen Sie dann im Browser die zuvor eingerichtete Domain https://servbay-vue-dev.servbay.demo.

   Durch ServBays automatische SSL-Zertifikatsverwaltung (per ServBay User CA oder Public CA) können Sie Ihre lokale Dev-Website bequem unter HTTPS aufrufen – ganz wie im Live-Betrieb. Mehr Infos zur SSL-Konfiguration finden Sie unter SSL-Zertifikat für Website in ServBay konfigurieren.

   Nun sollte Ihre Vue-Anwendung im Entwicklungsmodus im Browser sichtbar sein. Änderungen am Code werden dank Hot Reload sofort reflektiert.

Produktions-Build erstellen und bereitstellen (als statische Website)

Sobald Ihr Vue.js-Projekt bereit für die Veröffentlichung ist, müssen Sie es für den Produktivbetrieb bauen. Das Ergebnis ist eine Sammlung optimierter, statischer Dateien (HTML, CSS, JS usw.), die sich bequem als statische Seite über ServBay veröffentlichen lassen.

1. Produktions-Build anfertigen

   Im Projektverzeichnis führen Sie folgenden Build-Befehl aus:

   npm run build

   Das Ergebnis ist ein optimierter Dateioutput im Verzeichnis dist im Projektstamm.

2. Statischen Dateiserver einrichten

   In der ServBay-Oberfläche navigieren Sie wieder zu den Websites und fügen eine neue Website mit Typ Statisch hinzu:

   • Name: My first Vue production site (oder ein beliebiger, gut erkennbarer Name)
   • Domain: servbay-vue-prod.servbay.demo (oder eine andere .servbay.demo-Domain Ihrer Wahl)
   • Websitetyp: Statisch
   • Wurzelverzeichnis der Website: /Applications/ServBay/www/servbay-vue-app/dist (das absolute Verzeichnis Ihres Produktions-Builds)

   Nach dem Speichern richtet ServBay seinen Webserver so ein, dass Ihr statisches dist-Verzeichnis direkt ausgespielt wird.

3. Produktionsmodus aufrufen

   Stellen Sie sicher, dass der ServBay-Webserver läuft. Rufen Sie im Browser die entsprechende Domain https://servbay-vue-prod.servbay.demo auf.

   Jetzt sehen Sie die optimierte Produktionsversion Ihrer Vue-App – mit maximaler Ladeperformance. Auch hier profitieren Sie von ServBays frei wählbaren Domains und automatischer SSL-Absicherung für ein sicheres, lokales Testen.

Hinweise und Tipps

• Port-Konflikte: Wird der von npm run dev genutzt Port (z. B. 8585) bereits von einer anderen Anwendung belegt, gibt die Konsole einen Fehler aus. Wählen Sie in diesem Fall bitte einen freien Port und passen Sie die Reverse-Proxy-Konfiguration in ServBay entsprechend an.
• Status des ServBay-Webservers: Vergewissern Sie sich, dass der ServBay-Webserver (Caddy oder Nginx, je nach Einstellung) läuft, sonst ist der Zugriff über die eingerichtete Domain nicht möglich.
• Domain-Name-Auflösung: ServBay richtet für .servbay.demo-Domains die lokale Namensauflösung (127.0.0.1) automatisch ein. Nutzen Sie hingegen andere Domains, müssen Sie ggf. per Hand Ihre hosts-Datei anpassen oder den Hosts Manager in ServBay verwenden, damit die lokale Zuordnung funktioniert.

Fazit

Mit ServBay können Sie im Handumdrehen eine integrierte lokale Node.js-Entwicklungsumgebung auf macOS aufsetzen und Vue.js-Projekte komfortabel entwickeln sowie produktiv ausliefern. Dank der Websites-Funktion lassen sich Reverse-Proxys für Entwicklungsserver oder das Hosting von statischen Builds schnell konfigurieren – inklusive beliebiger Domains und automatischer SSL-Zertifikate für bequeme, sichere Tests. Damit wird das Einrichten und Arbeiten mit lokalen Vue.js-Projekten erheblich vereinfacht.