Erstellung und Ausführung eines Nuxt.js-Projekts

Was ist Nuxt.js?

Nuxt.js ist ein Open-Source-Framework basierend auf Vue.js zum Erstellen von serverseitig gerenderten Vue.js-Anwendungen. Es bietet vielfältige Funktionen wie Server-Side Rendering (SSR), statische Seitengenerierung (SSG), automatische Code-Splittung, leistungsstarkes Routing-System und vieles mehr, wodurch Entwickler effizientere moderne Webanwendungen erstellen können.

Hauptmerkmale und Vorteile von Nuxt.js

• Server-Side Rendering (SSR): Erhöht die Seitenladegeschwindigkeit und verbessert die SEO-Leistung.
• Statische Seitengenerierung (SSG): Vorrentung von statischen Seiten zur Leistungssteigerung und Verbesserung der Benutzererfahrung.
• Automatische Code-Splittung: Lädt nur den für die aktuelle Seite benötigten JavaScript-Code, um die Leistung zu optimieren.
• Eingebautes Routing: Dateisystembasiertes Routing ohne zusätzliche Konfiguration.
• Modular: Durch Module erweiterbare Funktionen zur einfachen Integration von Drittanbieter-Bibliotheken und -Diensten.
• Großes Ökosystem: Nuxt.js bietet eine Vielzahl von Plugins und Modulen, die die Entwicklung erleichtern.

Mit Nuxt.js können Entwickler moderne und reaktionsschnelle Webanwendungen effizienter erstellen.

Erstellung und Ausführung eines Nuxt.js-Projekts mit ServBay

In diesem Artikel erstellen und führen wir ein Nuxt.js-Projekt unter Verwendung der von ServBay bereitgestellten Node.js-Umgebung aus. Wir verwenden die "Host"-Funktion von ServBay, um den Webserver einzurichten und den Zugriff auf das Projekt über Reverse Proxy und statische Datei-Dienste zu ermöglichen.

Erstellung eines Nuxt.js-Projekts

1. Projekt initialisieren

   Stellen Sie zunächst sicher, dass Sie die von ServBay bereitgestellte Node.js-Umgebung installiert haben. Initialisieren Sie dann ein neues Nuxt.js-Projekt mit folgendem Befehl:

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   Geben Sie den Projektnamen (empfohlen: servbay-nuxt-app) ein und wählen Sie die weiteren Optionen nach Bedarf:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm
   ? UI framework: None
   ? Nuxt.js modules: Axios
   ? Linting tools: ESLint
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: jsconfig.json (Recommended for VS Code)

2. Abhängigkeiten installieren

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

   cd servbay-nuxt-app
   npm install

Änderungen an der Ausgabe des Nuxt.js-Projekts

1. Datei pages/index.vue ändern

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

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

In den Entwicklungsmodus wechseln

1. Entwicklungsserver starten

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

   npm run dev -- --port 8585

   Dies startet einen lokalen Entwicklungsserver und öffnet den Port 8585.

2. Reverse Proxy im ServBay Host 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 Nuxt.js dev site
   • Domain: servbay-nuxt-test.dev
   • Host-Typ: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Detaillierte Einrichtungsschritte finden Sie unter Hinzufügen einer Node.js-Entwicklungswebsite.

3. Entwicklungsmodus aufrufen

   Öffnen Sie den Browser und besuchen Sie https://servbay-nuxt-test.dev, um das Projekt in Echtzeit zu sehen. Dank der Unterstützung von ServBay für benutzerdefinierte Domains und kostenlose SSL-Zertifikate genießen Sie höhere Sicherheit.

Produktionsversion erstellen

1. Produktionsversion erstellen

   Nach Abschluss der Entwicklung erstellen Sie die Produktionsversion mit folgenden Befehlen:

   npm run build
   npm run export

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

2. Statische Dateidienste einrichten

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

   • Name: My first Nuxt.js production site
   • Domain: servbay-nuxt-test.prod
   • Host-Typ: Statisch
   • Webroot: /Applications/ServBay/www/servbay-nuxt-app/dist

3. Produktionsmodus aufrufen

   Öffnen Sie den Browser und besuchen Sie https://servbay-nuxt-test.prod, um die erstellte Produktionsversion zu sehen. Mit den benutzerdefinierten Domains und kostenlosen SSL-Zertifikaten von ServBay wird Ihre Seite sicherer und vertrauenswürdiger.

Mit den oben genannten Schritten haben Sie erfolgreich ein Nuxt.js-Projekt erstellt und ausgeführt und die von ServBay bereitgestellten Funktionen genutzt, um Ihr Projekt zu verwalten und darauf zuzugreifen.