Ich nehme am „Nuggets·Starting Plan“ teil
Einführung in Nuxt.js
Nuxt.js ist ein allgemeines Anwendungsframework, das auf Vue.js basiert.
Durch die abstrakte Organisation der Client/Server-Infrastruktur konzentriert sich Nuxt.js hauptsächlich auf das UI-Rendering von Anwendungen .
Unser Ziel ist es, ein flexibles Anwendungsframework zu erstellen, auf dessen Grundlage Sie den Infrastrukturcode eines neuen Projekts initialisieren oder Nuxt.js in einem vorhandenen Node.js-Projekt verwenden können.
Nuxt.js legt verschiedene Konfigurationen vor, die zum Entwickeln serverseitig gerenderter Anwendungen mit Vue.js erforderlich sind.
Was ist SPA?
SPA (Single Page Web Application) ist eine einseitige Webanwendung. Das Web ist keine Seite mehr, sondern eine Gesamtanwendung, eine Anwendung, die aus einem Routingsystem, einem Datensystem, einem Seitensystem (Komponentensystem) usw. besteht .
Das Vue, das wir zuvor gelernt haben, ist das Beste im SPA.
SPA-Anwendungen werden häufig in Szenarien eingesetzt, die keine hohen SEO-Anforderungen erfordern
SEO-Lösungen: Werden vorzeitig 页面和数据integriert
Was ist SEO?
Indem wir verstehen, wie verschiedene Suchmaschinen Internetseiten crawlen, wie sie indiziert werden und wie sie das Ranking der Suchergebnisse für ein bestimmtes Schlüsselwort und andere Technologien bestimmen, können wir den Inhalt der Webseite optimieren, sodass er den Surfgewohnheiten der Benutzer entspricht . Eine Technologie, die das Suchmaschinenranking verbessert, ohne das Benutzererlebnis zu beeinträchtigen, wodurch die Website-Besuche erhöht und letztendlich der Umsatz oder die Werbung verbessert werden.
- SEO: Suchmaschinenoptimierung (Search Engine Optimization) durch verschiedene Technologien (Mittel), um sicherzustellen, dass unsere Webinhalte von Suchmaschinen maximiert werden, das Gewicht maximiert wird und letztlich mehr Verkehr bringt.
- Es ist ziemlich offensichtlich, dass SPA-Programme schlecht für SEO sind
SEO-Lösungen: Werden vorzeitig 页面和数据integriert
- Frontend: Verwendung von SSR
- Backend: Seitenstatik (Freemarker, Thymeleaf, Velocity)
Was ist serverseitiges Rendering (Server Side Render) der SSR-Technologie? Das heißt: Die Webseite wird durch serverseitiges Rendering generiert und dann an den Client ausgegeben.
在SSR中，前端分成2部分：前端客户端、前端服务端 前端服务端，用于发送ajax，获得数据 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）
如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。
SPA和SSR对比
SPA单页应用程序
SSR服务器端渲染
优势
1.页面内容在客户端渲染 2. 只关注View层，与后台耦合度低，前后端分离 3.减轻后台渲染画面的压力
1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面
劣势
1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好
1.更多的服务器端负载 2.涉及构建设置和部署的更多要求，需要用Node.js渲染 3.开发条件有限制，一些生命周期将失效 4.一些常用的浏览器API无法使用
Nuxt.js
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
Nuxt支持vue的所有功能，此类内容为前端客户端内容。 Nuxt特有的内容，都是前端服务端内容。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
nuxt 上手实战
create-nuxt-app 介绍
-
Nuxt.js 提供了脚手架工具
create-nuxt-app -
create-nuxt-app需要使用npx
（1）安装NodeJS
这里不做讲解了，只要npm的版本不低于5.2.0版本即可。
（2）registry配置
Wenn das Intranet des Unternehmens eine ähnliche Produktbibliotheksadresse bereitstellt, kann der Wert der Registrierung auf die spezifische Adresse des Intranets des Unternehmens festgelegt werden. Wenn das chinesische Internet verwendet wird, ist es am besten, den Wert der Registrierung auf das NPM-Image von Taobao festzulegen. das heißt, Registrierung .npm.taobao.org. Wir können „registry=https://registry.n…“ direkt in die .npmrc-Datei einfügen
NPM-Konfigurationssatzregistrierung Registry.npm.taobao.org
(3) Installieren Sie das Scaffolding „create-nuxt-app“.
Geben Sie den Befehl npm i -g create-nuxt-app in das cmd-Fenster ein, drücken Sie die Eingabetaste und warten Sie auf den Installationsvorgang. Der endgültige Effekt ist in der folgenden Abbildung dargestellt:
nuxtjs-Verbesserung
Start-up
npm run dev
复制代码Lokaler Zugriff auf http://localhost:3000/
Verzeichnisname
beschreiben
Das Assets-Ressourcenverzeichnis wird zum Speichern statischer Ressourcen verwendet, die kompiliert werden müssen. Zum Beispiel: LESS, SASS usw. Standardmäßig verwendet Nuxt mehrere Webpack-Loader, um Dateien im Verzeichnis zu verarbeiten
Komponentenverzeichnis, Nuxt.js erweitert dieses Verzeichnis nicht und unterstützt kein SSR
Layouts-Layout-Komponentenverzeichnis
Seitenseitenverzeichnis, alle Vue-Ansichten, Nuxt generiert automatisch entsprechende Routen entsprechend der Verzeichnisstruktur.
Plugins Plugin-Verzeichnis
static Statisches Dateiverzeichnis, Dateien, die nicht kompiliert werden müssen
Speichern Sie das Vuex-Verzeichnis
nuxt.config.js personalisierte Nuxt-Konfigurationsdatei, der Inhalt überschreibt die Standardeinstellung
package.json-Projektkonfigurationsdatei