Nuxt.js in Aktion: Vue.js serverseitiges Rendering-Framework

Erstellen Sie ein Nuxt.js-Projekt

Stellen Sie zunächst sicher, dass Sie Node.js und Yarn oder NPM installiert haben. Erstellen Sie dann über die Befehlszeile ein neues Nuxt.js-Projekt:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Während des Erstellungsprozesses können Sie auswählen, ob Sie Optionen wie UI-Framework, Präprozessor usw. benötigen, und diese nach Bedarf konfigurieren.

Verzeichnisstruktur

Nuxt.js folgt einer bestimmten Verzeichnisstruktur, einige der wichtigsten Verzeichnisse sind wie folgt:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

• .nuxt/: Dieses Verzeichnis wird automatisch generiert und enthält kompilierten Code. Im Allgemeinen muss es nicht direkt geändert werden.
• Assets/: Speichert unkompilierte statische Ressourcen wie CSS, JavaScript und Bilder. Nuxt.js verarbeitet diese Ressourcen während des Builds.
• Components/: Speichert benutzerdefinierte Vue-Komponenten, die in verschiedenen Teilen der Anwendung wiederverwendet werden können.
• layouts/: Definiert das Layout der Seite. Es kann ein Standardlayout oder mehrere spezifische Layouts geben.
• seiten/: Jede Datei entspricht einer Route, und der Dateiname ist der Routenname. Dynamische Routen werden durch eckige Klammern [].
dargestellt
• Middleware/: Platzieren Sie benutzerdefinierte Middleware, die Logik vor und nach dem Rendern der Seite ausführen kann.
• Plugins/: Benutzerdefinierte Eintragsdatei für Vue.js-Plugins.
• static/: Direkt ohne Verarbeitung in das Build-Ausgabeverzeichnis kopiert, wird häufig zum Speichern von robots.txt oder favicon.ico usw. verwendet.
• store/: Vuex-Statusverwaltungsverzeichnis, in dem Aktionen, Mutationen, Getter und die Eintragsdatei des gesamten Stores gespeichert werden.
• nuxt.config.js: Nuxt.js-Konfigurationsdatei, die zum Anpassen der Projekteinstellungen verwendet wird.
• package.json: Projektabhängigkeiten und Skriptkonfiguration.
• Yarn.lock oder npm.lock: Zeichnen Sie die genaue Version der Projektabhängigkeiten auf, um die Abhängigkeitskonsistenz in verschiedenen Umgebungen sicherzustellen.

Seitenrendering

Erstellen Sie eine index.vue-Datei im Verzeichnis „pages/“. Dies ist die Homepage der Anwendung:

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Der Prozess des Renderns von Nuxt.js-Seiten ist in zwei Hauptphasen unterteilt: serverseitiges Rendering (SSR) und clientseitiges Rendering (CSR). Hier sind die detaillierten Schritte zum Rendern von Nuxt.js-Seiten:

Initialisierung:

Der Benutzer gibt die URL in den Browser ein und sendet eine Anfrage an den Server.

Nachdem der Server die Anfrage erhalten hat, beginnt er mit der Verarbeitung.

Routenauflösung:

Nuxt.js verwendet die Routenkonfiguration in nuxt.config.js (falls vorhanden) oder generiert automatisch Routen aus dem Verzeichnis „pages/“.

Die entsprechende Seitendatei wird identifiziert, z. B. seiten/index.vue oder seiten/about.vue.

Datenvorabruf:

Nuxt.js sucht nach asyncData- oder Fetch-Methoden in der Seitenkomponente (falls vorhanden).

Diese Methoden werden auf der Serverseite ausgeführt, um Daten von APIs oder anderen Datenquellen abzurufen.

Nachdem die Daten abgerufen wurden, werden sie serialisiert und in die Seitenvorlage eingefügt.

Vorlagenrendering:

Nuxt.js verwendet die Rendering-Engine von Vue.js, um Komponenten und vorab abgerufene Daten in einen HTML-String zu konvertieren.
Der HTML-String enthält alle vom Client benötigten Anfangsdaten, eingebettet in das <script> Tag im JSON-Format.</script>

HTML zurückgeben:

Der Server sendet die generierte HTML-Antwort zurück an den Client (Browser).

Client-Initialisierung:

Nachdem der Browser den HTML-Code empfangen hat, beginnt er mit der Analyse und Ausführung von Inline-JavaScript.
Die Nuxt.js-Clientbibliothek (nuxt.js) wird geladen und initialisiert.

Client-Rendering:

Die Client-Bibliothek übernimmt das Rendering, die Vue.js-Instanz wird erstellt und die Daten werden aus dem Inline-JSON in die Vue-Instanz eingefügt.
Die Seite schließt das erste Rendering ab und der Benutzer kann den vollständigen Seiteninhalt sehen.
Zu diesem Zeitpunkt ist die Seite interaktiv und der Benutzer kann Ereignisse auslösen und navigieren.

Weiterführende Navigation:

Wenn der Benutzer zu anderen Seiten navigiert, verwendet Nuxt.js clientseitiges Routing (Vue Router) für Sprünge ohne Aktualisierung.
Wenn für die neue Seite Daten erforderlich sind, wird die asyncData- oder fetch-Methode auf dem Client ausgeführt, ruft die neuen Daten ab und aktualisiert die Ansicht.

SSG (Statische Site-Generierung):

Außerhalb der Entwicklung können Sie den Befehl nuxt generic verwenden, um statische HTML-Dateien zu generieren.

Jede Seite wird als separate HTML-Datei mit allen erforderlichen Daten und Ressourcen vorgerendert.

Verwendung von asyncData

Die asyncData-Methode ist einzigartig für Nuxt.js und ermöglicht es Ihnen, Daten vorab auf dem Server abzurufen und auf dem Client wiederzuverwenden. Im obigen Beispiel haben wir einfach den Wert von message geändert, aber in einer realen Anwendung könnten Sie hier eine API aufrufen, um Daten abzurufen.

Middleware

Middleware (Middleware) ist eine Funktion, die es Ihnen ermöglicht, vor und nach Routenänderungen eine bestimmte Logik auszuführen. Middleware kann global, auf Seitenebene oder auf Layoutebene verwendet werden, um Aufgaben wie Authentifizierung, Vorladen von Daten, Routenwächter usw. zu erledigen.

1. Globale Middleware

Globale Middleware wird in der Datei nuxt.config.js konfiguriert und wirkt sich auf alle Seiten in der Anwendung aus:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Middleware-Dateien befinden sich normalerweise im Middleware-/Verzeichnis, z. B. middleware/globalMiddleware1.js:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

2. Middleware auf Seitenebene

Middleware auf Seitenebene wirkt sich nur auf bestimmte Seiten aus. Deklarieren Sie Middleware in der Seitenkomponente:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Die entsprechende Middleware-Datei befindet sich im Middleware/Verzeichnis, zum Beispiel middleware/pageMiddleware.js:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3. Middleware auf Layoutebene

Middleware auf Layoutebene ähnelt der auf Seitenebene, gilt jedoch für alle Seiten, die das Layout verwenden. Deklarieren Sie Middleware in der Layoutkomponente:

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Die entsprechende Middleware-Datei befindet sich im Middleware-/Verzeichnis:

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Kontext der Middleware

Die Middleware-Funktion erhält als Parameter ein Kontextobjekt, das folgende Eigenschaften enthält:

• req (HTTP-Anforderungsobjekt, nur auf der Serverseite gültig)

• res (HTTP-Antwortobjekt, nur auf der Serverseite gültig)

• weiterleiten (Funktion zur Weiterleitung)

• App (Vue-Instanz)

• Route (aktuelle Routeninformationen)

• Store (Vuex Store, falls aktiviert)

• Nutzlast (wenn von asyncData zurückgegebene Daten vorhanden sind)

Middleware kann sequentiell ausgeführt werden, und jede Middleware kann entscheiden, ob sie mit der Ausführung der nächsten Middleware in der Kette fortfährt oder die Route durch die Umleitungsfunktion unterbricht.

Dynamisches Routing

Nuxt.js unterstützt dynamisches Routing, was sehr nützlich für die Verarbeitung von Inhalten mit dynamischen IDs wie Blog-Beiträgen, Benutzerprofilen usw. ist. Erstellen Sie eine dynamische Routing-Datei im Verzeichnis „pages/“, z. B. [id].vue:

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

Hier stellt [id] einen dynamischen Parameter dar, asyncData verarbeitet diesen Parameter automatisch und erhält den Blog-Beitrag mit der entsprechenden ID.

Layout
Mit dem Layout können Sie die gemeinsame Struktur globaler oder spezifischer Seiten definieren. Erstellen Sie eine Datei „default.vue“ im Verzeichnis „layouts/“:

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

Standardmäßig verwenden alle Seiten dieses Layout. Wenn Sie für eine bestimmte Seite ein anderes Layout festlegen möchten, können Sie dies in der Seitenkomponente angeben:

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

Plugin- und Bibliotheksintegration
Nuxt.js unterstützt Vue.js-Plugins, die Sie in nuxt.config.js konfigurieren können:

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

Erstellen Sie dann die entsprechenden Dateien im Plugins/-Verzeichnis, z. B. vuetify.js:

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

Konfiguration und Optimierung

Nuxt.js-Konfigurationsdatei (nuxt.config.js)

nuxt.config.js ist die Hauptkonfigurationsdatei für Nuxt-Anwendungen, die zum Anpassen des Verhaltens der Anwendung verwendet wird. Hier sind einige häufig verwendete Konfigurationselemente:

• Modus: Legen Sie den Ausführungsmodus der Anwendung fest. Die optionalen Werte sind „spa“ (Einzelseitenanwendung), „universal“ (serverseitiges Rendering) und „static“ (statische Generierung). Der Standardwert ist „universal“.
• Kopf: Konfigurieren Sie den Teil der Seite, wie Titel, Metadaten, Links usw.
• css: Geben Sie die globale CSS-Datei an, die ein Array von Dateipfaden sein kann.
• Build: Konfigurieren Sie den Build-Prozess, z. B. Transpile, ExtractCSS, Extend usw. Sie können hier beispielsweise ein Babel-Plugin hinzufügen oder die Webpack-Konfiguration anpassen.
• Router: Passen Sie die Routing-Konfiguration an, z. B. Basispfad, Modus usw.
• axios: Konfigurieren Sie das Axios-Modul, einschließlich Basis-URL, Proxy-Einstellungen usw.
• Plugins: Registrieren Sie globale Vue-Plugins, die zum Laden auf dem Client oder Server angegeben werden können.
• Module: Laden Sie externe Module wie @nuxtjs/axios, @nuxtjs/proxy usw.
• env: Definieren Sie Umgebungsvariablen, die zur Build-Zeit in den Client und den Server eingefügt werden.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Optimierungsstrategie

• Asynchroner Datenvorabruf (asyncData/fetch): Verwenden Sie asyncData oder fetch-Methoden, um Daten auf der Serverseite vorab abzurufen, um die Belastung durch das Client-Rendering zu reduzieren.
• Codeaufteilung: Nuxt.js teilt den Code automatisch auf, um sicherzustellen, dass der relevante Code nur geladen wird, wenn die Route besucht wird.
• Statische Site-Generierung (SSG): Verwenden Sie den nuxt-Generate-Befehl, um statische HTML-Dateien zu generieren, die für Websites mit seltenen Inhaltsänderungen geeignet sind und die Ladegeschwindigkeit und SEO-Freundlichkeit verbessern.
• Cache-Strategie: Verwenden Sie HTTP-Cache-Strategien wie ETag und Last-Modified, um doppelte Anfragen zu reduzieren.
• Vue.js-Optimierung: Stellen Sie die Optimierung von Vue-Komponenten sicher, z. B. die Vermeidung unnötiger Beobachter, die Verwendung von v-once zur Reduzierung des erneuten Renderns usw.
• Bildoptimierung: Verwenden Sie das richtige Bildformat (z. B. WebP), stellen Sie sicher, dass die Bildgröße angemessen ist, und verwenden Sie die Lazy-Loading-Technologie.
• Service Worker: Integrieren Sie PWA-Unterstützung und verwenden Sie Service Worker für Offline-Caching und Push-Benachrichtigungen.
• Tree Shaking: Stellen Sie sicher, dass Ihre Abhängigkeiten Tree Shaking unterstützen, um nicht verwendeten Code zu entfernen.
• Analyse und Überwachung: Verwenden Sie nuxt build --analyze oder integrieren Sie Tools von Drittanbietern (wie Google Lighthouse) für die Leistungsanalyse, um die Anwendungsleistung kontinuierlich zu überwachen.

Statische Site-Generierung (SSG)

Die statische Site-Generierung (SSG) von Nuxt.js wird über den Befehl nuxt generic implementiert. Dieser Befehl durchläuft die Routen der Anwendung und generiert für jede Route eine vorgerenderte HTML-Datei, die direkt auf jedem Hosting-Dienst für statische Dateien bereitgestellt werden kann. Hier sind einige wichtige Punkte zu SSG:

1. Konfiguration: In der Datei nuxt.config.js können Sie die Generierungsoption konfigurieren, um das Verhalten der statischen Generierung zu steuern:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2. Generieren: Führen Sie npm run generic oder Yarn generic aus, um den statischen Generierungsprozess zu starten. Nuxt.js generiert die entsprechende HTML-Datei gemäß der Konfiguration in generic.routes. Wenn nicht explizit definiert, werden automatisch alle Dateien im Verzeichnis „pages/“ gescannt, um Routen zu generieren.

3. Datenvorabruf: In der Seitenkomponente können Sie die asyncData- oder fetch-Methode verwenden, um Daten vorab abzurufen. Diese Daten werden beim Generieren der statischen Seite in den HTML-Code eingefügt, sodass die Seite beim Laden durch den Client keine zusätzlichen Anforderungen erfordert:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

4. Middleware-Verarbeitung: Serverseitige Middleware wird während des SSG-Prozesses nicht ausgeführt, da SSG statische Dateien ohne Serverumgebung generiert. Wenn Sie beim Generieren eine Logik ausführen müssen, ist es daher am besten, diese in asyncData oder fetch zu verarbeiten.

5. Bereitstellung: Die generierten statischen Dateien können für jeden Hosting-Dienst für statische Dateien bereitgestellt werden, z. B. Netlify, Vercel, GitHub Pages oder AWS S3. Für diese Dienste ist in der Regel kein serverseitiger Code erforderlich. Laden Sie einfach den generierten dist-Ordner hoch.

6. SEO-Optimierung: SSG verbessert SEO, da Suchmaschinen-Crawler vorgerenderte HTML-Inhalte lesen können, ohne auf die Ausführung von JavaScript warten zu müssen.

7. Dynamische Routen: Bei dynamischen Routen versucht Nuxt.js, alle möglichen Kombinationen zu generieren. Wenn nicht alle möglichen dynamischen Routen vorhergesagt werden können, können sie manuell in „generate.routes“ angegeben oder mithilfe von „generate.includePaths“ und „generate.excludePaths“ gesteuert werden.

8. 404-Seite: Wenn Sie „generate.fallback“ auf „true“ setzen, wird eine 404-Seite für dynamische Routen generiert, die nicht vorgerendert wurden. Wenn Benutzer diese Routen besuchen, versucht Nuxt.js, sie auf der Clientseite darzustellen.

Führen Sie den Nuxt-Generate-Befehl aus und Nuxt.js generiert statische HTML-Dateien.

Validierung und Fehlerbehandlung

Validierung

Die Validierung umfasst normalerweise die Eingabevalidierung von Formulardaten oder API-Anfragen. Nuxt.js selbst stellt keine Validierungsbibliothek direkt bereit, Sie können jedoch Bibliotheken von Drittanbietern wie Vuelidate, vee-validate integrieren oder TypeScript zur Typprüfung verwenden.

Vee-Validate verwenden
1. Installation: Zuerst müssen Sie die vee-validate-Bibliothek installieren:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2. Konfiguration: Fügen Sie die Vue-Plugin-Konfiguration in nuxt.config.js hinzu:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3. Erstellen Sie ein Plugin: Konfigurieren Sie Vee-Validate inplugins/vee-validate.js:

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

4. Verwendung: Verwenden Sie Vee-Validate für die Formularvalidierung in Ihrer Komponente:

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Fehlerbehandlung

Nuxt.js bietet mehrere Möglichkeiten zur Fehlerbehandlung, einschließlich globaler Fehlerbehandlung und seitenspezifischer Fehlerbehandlung.

Globale Fehlerbehandlung

• Benutzerdefinierte Fehlerseite: Erstellen Sie eine Datei „error.vue“ im Verzeichnis „layouts“, um das Layout der Fehlerseite anzupassen.
• Globale Fehler erfassen: Konfigurieren Sie die Fehlereigenschaft in nuxt.config.js, um globale Fehler zu erfassen:

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

Seitenspezifische Fehlerbehandlung

In der Seitenkomponente können Sie die Try-Catch-Struktur der asyncData- oder fetch-Methode verwenden, um Fehler zu behandeln:

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

Fehlerbehandlung bei API-Anfragen

Wenn Sie bei API-Anfragen das @nuxtjs/axios-Modul verwenden, können Sie Fehler im Anfrage-Interceptor einheitlich behandeln:

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

Stellen Sie sicher, dass Sie dieses Plugin in nuxt.config.js registrieren.

Integration des Vue-Ökosystems

Vue-Router:

Nuxt.js generiert automatisch ein Routing-System für Ihre Anwendung basierend auf der Dateistruktur. Die Routing-Konfiguration muss normalerweise nicht manuell geschrieben werden, sondern kann über die Router-Eigenschaft von nuxt.config.js erweitert werden.

Vuex:

Nuxt.js erstellt automatisch einen Vuex-Store. Im Store-Verzeichnis können Sie modulare Zustände, Mutationen, Aktionen und Getter erstellen. Erstellen Sie beispielsweise eine Datei „store/modules/users.js“, um Benutzerdaten zu verwalten.

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

Vue-CLI:

Nuxt.js bietet ein eigenes Build-Tool, basiert aber auch auf Vue CLI. Dies bedeutet, dass Sie Befehlszeilentools ähnlich der Vue-CLI verwenden können, z. B. npx nuxt generic (statische Generierung) oder npx nuxt build (Anwendung erstellen).

Babel:

Nuxt.js ist standardmäßig mit Babel konfiguriert, um die neuesten JavaScript-Funktionen zu unterstützen. Normalerweise müssen Sie Babel nicht manuell konfigurieren, es sei denn, es besteht ein besonderer Bedarf.

Typoskript:

Um TypeScript zu verwenden, legen Sie typescript: true in nuxt.config.js fest und Nuxt.js konfiguriert automatisch die TypeScript-Unterstützung.

ESLint:

Zur Codequalitätsprüfung können Sie ESLint in Ihrem Projekt installieren und .eslintrc.js konfigurieren. Nuxt.js bietet das Plugin @nuxt/eslint-module, um die Integration zu vereinfachen.

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

VueUse:

VueUse ist eine Vue-Anwendungsfallbibliothek, die verschiedene praktische Funktionen enthält. Zur Integration installieren Sie zunächst @vueuse/core, importieren und verwenden Sie dann die Funktionen in Ihren Komponenten.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

Vue-Plugins:

Sie können Vue-Plugins global über das Plugins-Konfigurationselement in nuxt.config.js registrieren. Integrieren Sie beispielsweise Vue Toastify, um Benachrichtigungen anzuzeigen:

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Workflow mit Nuxt.js

Nuxt.js bietet einen vollständigen Workflow für Entwicklung, Erstellung und Bereitstellung. Verwenden Sie den Befehl nuxt, um den Entwicklungsserver zu starten, nuxt build für den Produktionsaufbau, nuxt start, um den Produktionsserver zu starten, und nuxt generic, um statische Dateien zu generieren.

Leistungsoptimierung

1. Statische Generierung (SSG): Verwenden Sie den nuxt-Generate-Befehl, um vorgerenderte HTML-Dateien zu generieren, was die Ladegeschwindigkeit des ersten Bildschirms erheblich verbessern kann und SEO-freundlich ist.

2. Codeaufteilung: Nuxt.js führt standardmäßig eine Codeaufteilung durch, teilt die Anwendung in mehrere kleine Blöcke auf und lädt nur den Code, der für die aktuelle Seite erforderlich ist, wodurch das anfängliche Ladevolumen reduziert wird.

3. Verzögertes Laden: Bei großen Anwendungen können Sie das verzögerte Laden von Komponenten oder Modulen in Betracht ziehen und diese nur bei Bedarf laden. Sie können oder kombiniert mit asynchronen Komponenten, um dies zu erreichen.

4. Ressourcen optimieren:

• Bilder: Verwenden Sie das richtige Format (z. B. WebP), komprimieren Sie Bilder, verwenden Sie Lazy Loading () oder verwenden Sie nuxt- Bild- oder Folgebildkomponenten.

• CSS: CSS in eine separate Datei extrahieren und Inline-Stile reduzieren.

• JS: Verwenden Sie Tree Shaking, um nicht verwendeten Code zu entfernen.

1. Asynchroner Datenvorabruf: Verwenden Sie asyncData oder fetch-Methoden, um Daten vorab zu laden, um sicherzustellen, dass die Daten vor dem Rendern bereit sind.

2. Serverseitiges Caching: Verwenden Sie das nuxt-ssr-cache-Modul, um die Ergebnisse des serverseitigen Renderings zwischenzuspeichern und unnötige API-Aufrufe zu reduzieren.

3. HTTP-Caching: Legen Sie die richtigen Cache-Header fest (z. B. Cache-Control) und verwenden Sie den Browser, um statische Ressourcen zwischenzuspeichern.

4. Routenwächter: Verwenden Sie Routenwächter wie beforeRouteEnter, um das Laden von Daten zu vermeiden, wenn sie nicht benötigt werden.

5. HTTP-Anfragen reduzieren: Kombinieren Sie mehrere CSS- und JS-Dateien, um die Anzahl der HTTP-Anfragen zu reduzieren.

6. API-Leistung optimieren: Optimieren Sie die Backend-Schnittstelle, reduzieren Sie die Antwortzeit und verwenden Sie Paging-, Filter- und Caching-Strategien.

7. Nutzung von CDN: Hosten Sie statische Ressourcen auf CDN, um das Laden für globale Benutzer zu beschleunigen.

8. Vuex-Zustandsverwaltung optimieren: Vermeiden Sie unnötig berechnete Eigenschaften und Listener, um den Aufwand für Zustandsänderungen zu reduzieren.

9. Leistungsprüfung: Verwenden Sie Lighthouse, Chrome DevTools oder andere Leistungsprüfungstools, um die Anwendungsleistung regelmäßig zu überprüfen und basierend auf dem Bericht Verbesserungen vorzunehmen.

10. Service Worker: Integrieren Sie ggf. PWA-Funktionen und verwenden Sie Service Worker für Offline-Caching und Ressourcen-Vorladen.

11. Moduloptimierung: Wählen Sie leistungsstarke Module von Drittanbietern und stellen Sie sicher, dass diese für SSR optimiert sind.

Das obige ist der detaillierte Inhalt vonNuxt.js in Aktion: Vue.js serverseitiges Rendering-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!