Einrichten und Ausführen eines Vue.js Projekts

Was ist Vue.js?

Vue.js ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen großen Frameworks setzt Vue auf ein von unten nach oben aufgebautes, inkrementelles Entwicklungsdesign. Der Kern von Vue konzentriert sich nur auf die Ansichtsschicht, wodurch es nicht nur einfach zu erlernen, sondern auch leicht mit Drittanbieter-Bibliotheken oder bestehenden Projekten zu integrieren ist. Vue 3 ist die neueste Version von Vue.js und bietet viele neue Funktionen und Verbesserungen, darunter schnellere Leistung, kleinere Paketgrößen und bessere Unterstützung für TypeScript.

Hauptmerkmale und Vorteile von Vue 3

• Composition API: Stellt Logikcode durch Funktionskombinationen zusammen, was den Code wartbarer und wiederverwendbarer macht.
• Schnellere Leistung: Vue 3 verwendet Proxy-Objekte zur Implementierung seines reaktiven Systems, was zu erheblichen Leistungsverbesserungen führt.
• Kleinere Paketgröße: Dank Tree-shaking ist die Paketgröße von Vue 3 kleiner als die von Vue 2.
• Bessere TypeScript-Unterstützung: Vue 3 bietet bessere TypeScript-Typsignaturen, was die Entwicklungserfahrung verbessert.
• Verbesserter Komponentenlebenszyklus: Neue Lifecycle-Hooks machen die Komponentensignale klarer und verwaltbarer.

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

Erstellen und Ausführen eines Vue 3 Projekts mit ServBay

In diesem Artikel werden wir die Node.js-Umgebung von ServBay verwenden, um ein Vue 3-Projekt zu erstellen und auszuführen. Wir werden die „Host“-Funktion von ServBay nutzen, um einen Webserver einzurichten und auf das Projekt über Reverse Proxy und statische Dateidienste zuzugreifen.

Erstellen eines Vue 3 Projekts

1. Projekt initialisieren

   Stellen Sie sicher, dass Sie die von ServBay bereitgestellte Node.js-Umgebung installiert haben. Verwenden Sie dann den folgenden Befehl, um ein neues Vue 3-Projekt zu initialisieren:

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

   Geben Sie den Projektnamen ein (wir empfehlen servbay-vue-app) und wählen Sie weitere Optionen nach Bedarf:

   ✔ Projektname: … servbay-vue-app
   ✔ TypeScript hinzufügen? … No
   ✔ JSX-Unterstützung hinzufügen? … No
   ✔ Vue Router für Single Page Application Entwicklung hinzufügen? … Yes
   ✔ Pinia für State Management hinzufügen? … No
   ✔ Vitest für Unit-Tests hinzufügen? … No
   ✔ Eine End-to-End Testlösung hinzufügen? … No
   ✔ ESLint für Code-Qualität hinzufügen? … Yes
   ✔ Prettier für Code-Formatierung hinzufügen? … Yes
   ✔ Vue DevTools 7-Erweiterung für Debugging hinzufügen? (experimentell) … No

2. Abhängigkeiten installieren

   Wechseln Sie in das Projektverzeichnis und installieren Sie die Abhängigkeiten:

   cd servbay-vue-app
   npm install

Ändern der Ausgabeinhalte des Vue-Projekts

1. Ändern der Datei src/App.vue

   Öffnen Sie die Datei src/App.vue und ändern Sie den Inhalt, damit die Webseite "Hello ServBay!" anzeigt:

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </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>

Entwicklungsmodus betreten

1. Entwicklungsserver ausführen

   Starten Sie den Entwicklungsserver und geben Sie den Port an (z. B.: 8585):

   npm run dev -- --port 8585

   Dadurch wird ein Entwicklungsserver lokal gestartet und der Port 8585 freigegeben.

2. ServBay Host Reverse Proxy konfigurieren

   Verwenden Sie die „Host“-Funktion von ServBay, um über einen Reverse Proxy auf den Entwicklungsserver zuzugreifen. Fügen Sie in den Host-Einstellungen von ServBay einen neuen Reverse Proxy hinzu:

   • Name: My first Vue dev site
   • Domain: servbay-vue-test.dev
   • Host-Typ: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Detaillierte Anweisungen finden Sie unter Hinzufügen einer Nodejs-Entwicklungswebsite.

3. Entwicklungsmodus aufrufen

   Öffnen Sie Ihren Browser und besuchen Sie https://servbay-vue-test.dev, um das Projekt in Echtzeit zu sehen. Dank der Unterstützung von benutzerdefinierten Domänen und kostenlosen SSL-Zertifikaten durch ServBay genießen Sie erhöhte Sicherheit.

Produktionsversion erstellen

1. Produktionsversion erstellen

   Wenn die Entwicklung abgeschlossen ist, erstellen Sie die Produktionsversion mit folgendem Befehl:

   npm run build

   Nach dem Build-Prozess befinden sich die generierten statischen Dateien im dist-Verzeichnis.

2. Statische Dateidienste einrichten

   Verwenden Sie die „Host“-Funktion von ServBay, um über statische Dateidienste auf die Produktionsversion zuzugreifen. Fügen Sie in den Host-Einstellungen von ServBay eine neue statische Website hinzu:

   • Name: My first Vue production site
   • Domain: servbay-vue-test.prod
   • Host-Typ: Statisch
   • Website-Stammverzeichnis: /Applications/ServBay/www/servbay-vue-app/dist

3. Produktionsmodus aufrufen

   Öffnen Sie Ihren Browser und besuchen Sie https://servbay-vue-test.prod, um die erstellte Produktionsversion zu sehen. Dank der benutzerdefinierten Domänen und kostenlosen SSL-Zertifikate von ServBay ist Ihre Website sicherer und vertrauenswürdiger.

Mit diesen Schritten haben Sie erfolgreich ein Vue 3-Projekt erstellt und ausgeführt sowie die von ServBay bereitgestellten Funktionen genutzt, um Ihr Projekt zu verwalten und darauf zuzugreifen.