Erkundung des serverseitigen Renderings von Nuxt.js Vue

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des serverseitigen Renderns von Nuxt.js Vue vor. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

Dieser Artikel verwendet Nuxt für das serverseitige Rendering https://zh.nuxtjs.org/

Nuxt.js ist sehr einfach und benutzerfreundlich. Ein einfaches Projekt muss lediglich Nuxt als abhängige Komponente hinzufügen.

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. Nach dem Packen einer großen WebApp ist das JS sehr groß, daher erfolgt das Laden nach Modul, z. B. require.js, einer asynchronen Anforderung. 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 wird jetzt unter http://localhost:3000 ausgeführt

Hinweis: Nuxt.js wartet auf Dateiänderungen in Seitenverzeichnis und automatischer Neustart, kein manueller Neustart der Anwendung beim Hinzufügen neuer Seiten erforderlich.

Routing

nuxt generiert Routing-Konfiguration basierend auf der Seitenverzeichnisstruktur

Asynchrone Daten asyncData

Beachten Sie, dass die Seitenkomponente muss Es kann verwendet werden, um es als asyncData aufzurufen (das heißt, es kann nicht unter Komponenten aufgerufen werden und muss weitergeleitet werden).

Asynchrone Daten vorErstellen, erstellt

Hinweis: Im Lebenszyklus jeder Vue-Komponente vorhanden sind nur zwei beforeCreate undcreated Dieser Hook wird sowohl auf der Browser- als auch auf der Serverseite aufgerufen; die anderen Hooks werden nur auf der Browserseite aufgerufen.

Verwenden Sie das Plugin mint-ui

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

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

Vue.use(Mint);

in nuxt hinzufügen .config Konfigurieren des Plugins-Felds in .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, Layout-Layout, das wir einfach über Layout implementieren können Layout: Wechseln Sie bequem zwischen mehreren Layouts der Seite. 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie jQuery, um einen auf die Maus reagierenden Transparenzverlaufsanimationseffekt zu implementieren

Mit jQuery implementierter Mausreaktionspuffer-Animationseffekt

So implementieren Sie einen auf die Maus reagierenden Taobao-Animationseffekt in jQuery

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