Ausführliche Erläuterung des serverseitigen Renderings von Nuxt.js Vue

Nuxt.js ist sehr einfach und benutzerfreundlich. Ein einfaches Projekt muss lediglich Nuxt als abhängige Komponente hinzufügen. Dieser Artikel stellt Ihnen hauptsächlich das serverseitige Rendering von Nuxt.js Vue vor und gibt Ihnen eine Referenz. Ich hoffe, er kann Ihnen helfen.

Vue wird von vielen Front-End-Entwicklern aufgrund seiner einfachen und leicht verständlichen API, der effizienten Datenbindung und des flexiblen Komponentensystems bevorzugt. Viele inländische Unternehmen nutzen Vue für die Projektentwicklung. Das von uns verwendete Jianshu basiert auf Vue.

Wir wissen, dass es beim SPA-Frontend-Rendering zwei große Schwachstellen gibt: (1) SEO. Für Suchmaschinen-Crawler ist es schwierig, vom Client gerenderte Seitenmetainformationen und andere SEO-bezogene Informationen zu crawlen, wodurch die Website für Benutzer in Suchmaschinen nicht mehr durchsuchbar ist. (2) Benutzererfahrung. Die JS nach dem Packen einer großen WebApp wird sehr groß sein, daher erfolgt das Laden nach Modul, wie require.js, asynchrone Anfrage. Wenn Webpack populär wird, wird es zum Code-Splitting. Dennoch kann die anfängliche Darstellung der Seite je nach Gerät des Benutzers immer noch sehr langsam sein und die Wartezeit auf einen weißen Bildschirm ist zu lang, was für die immer wählerischer werdende Benutzergruppe nicht akzeptabel ist.

Daher muss für diejenigen, die Werbeseiten anzeigen, wie z. B. offizielle Websites, ein serverseitiges Rendering (SSR) durchgeführt werden. Installieren Sie nuxt.js

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的

// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

Ausführen

npm run dev

Die Anwendung läuft jetzt unter http://localhost:3000

Hinweis: Nuxt.js wartet auf Dateiänderungen im Seitenverzeichnis und startet automatisch neu. Ein manueller Neustart ist nicht erforderlich die Anwendung beim Hinzufügen einer neuen Seite.

Routing

nuxt generiert Routing-Konfiguration basierend auf der Seitenverzeichnisstruktur

Asynchrone Daten asyncData

Hinweis Zum Aufrufen von asyncData ist eine Seitenkomponente erforderlich (das heißt, sie kann nicht unter Komponenten aufgerufen werden, es muss eine weitergeleitete Seite sein)

Asynchrone Daten vorErstellen, erstellt

Hinweis: In Während des Zyklus werden nur die beiden Hooks „beforeCreate“ und „created“ sowohl auf der Browserseite als auch auf der Serverseite aufgerufen. Die anderen Hooks werden nur auf der Browserseite aufgerufen.

Verwendung des Plugins mint-ui

Zuerst müssen wir die Plugin-Datei mint-ui.js im Plugins-Ordner hinzufügen

import Vue from "vue";
import Mint from "mint-ui";

Vue.use(Mint);

Konfigurieren Sie das Plugins-Feld in nuxt.config.js

/**
  * 配置第三方插件
  */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],

//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件

//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

Layout Layout

1.nuxt.js implementiert ein neues Konzept, das Layout-Layout. Über das Layout-Layout können wir bequem zwischen mehreren Layouts der Seite wechseln. In diesem Projekt wurden drei häufig verwendete Layouts implementiert, nämlich: 1) zweispaltiges Layout mit einer festen linken Spalte und einer dynamischen Breite der rechten Spalte. 2. Fehlerseiten-Eingabeaufforderung, ein Layoutschema mit einem Eingabeaufforderungsfeld in der Mitte 3. Reinweißes Seitenlayout.

Wenn auf einer speziell entwickelten Seite das Standardlayout verwendet wird, muss das Layout der Seite nicht angegeben werden. Das Nuxt-Framework ordnet die Seite ohne angegebenes Layout automatisch dem Standardlayout zu. Wenn Sie das Layout angeben müssen, geben Sie das Layout im Layoutfeld an. Wie in der Abbildung gezeigt, wird das vollständige Layout auf der Anmeldeseite angegeben.

Verwandte Empfehlungen:

Vue.js und ASP.NET Core serverseitige Rendering-Funktion

Nuxt Vue.js serverseitige Rendering-Praxis

Detaillierte Erläuterung der serverseitigen Rendering-Beispiele von React

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des serverseitigen Renderings von Nuxt.js Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!