Erstellen einer Website mit Nuxt.js und WordPress REST API

Aktualisieren:
Du kannst jetzt mein Boilerplate aus dem Public Repo benutzen:
https://github.com/bovas85/nuxt-headless
(Bitte ankreuzen, wenn Sie es zu schätzen wissen, können Sie gerne einen Beitrag leisten).

Oft befinden wir uns in der Position, in der unsere Kunden ein Content Management System (CMS) wünschen, mit dem sie ihre Seiten bearbeiten können, ohne dazu HTML-Code zu kennen.

In der Regel haben Sie dann die Wahl zwischen einem maßgeschneiderten CMS und WordPress (obwohl in letzter Zeit immer mehr „Headless“ -CMS auf dem Markt sind, sowie die sehr gültige Alternative zu Abschriften oder statischen CMS-Optionen).

In unserem Fall haben wir uns aus folgenden Gründen für WordPress entschieden:
- Es ist ein solides CMS mit jahrelanger Erfahrung auf dem Gebiet
- Sicherheitslücken sind jetzt fast geschlossen, wenn man die automatischen Sicherheitsupdates ab Version 4.7 in Betracht zieht (möglicherweise irre ich mich in der Version, zitiere mich nicht dazu).
- Mit der WordPress-REST-API können wir auf mehrere Felder (und benutzerdefinierte) zugreifen, ohne das gesamte Front-End mit WordPress bedienen zu müssen.

Unser Backend-Entwickler war auch besser mit PHP, Laravel und WordPress vertraut als andere Technologien. Zum Glück haben wir uns am Ende für WordPress entschieden.

In Bezug auf das Frontend war ich für die Auswahl des Stacks verantwortlich und da ich Vue.js (Vue 2) so sehr liebe, habe ich dies definitiv vorangetrieben, indem ich Nuxt.js für Server Side Rendering (SSR von nun an) verwendet habe.

Teil 1, Was ist Nuxt.js?

Nuxt.js PROs:
1) automatisch generiertes Routing mit Middleware, Validatoren und mehr
2) Volle SSR-Unterstützung ab Werk mit vuex-Unterstützung
3) Seitensystem mit asynchronen Datenhooks, Übergängen, Ladeanzeige etc
4) sofort einsatzbereites Layoutsystem
5) Metadaten-Handling von Anfang an mit SSR-Unterstützung
6) alle ausgefallenen Nuxt-Module, die Dinge wie PWA, Authentifizierung, Offline-Unterstützung und mehr bieten
7) Konvention über Konfigurationsansatz, den ich bevorzuge
8) Eine Community von Vue-Entwicklern, die alle mit derselben Meinung arbeiten.
Punkt 8 ist besonders groß, da die Vue-Community extrem gespalten ist, da Vue ein fortschrittlicher Rahmen ist.
Die Leute verwenden Vue auf so viele verschiedene Arten, dass es großartig ist, einen großen Teil der Vue-Community zu haben, der Vue tatsächlich auf dieselbe Weise verwendet.
Das ist ohne SSR ...

- @ gustojs # 2934 vom VueLand Discord-Kanal

Wie Sie sehen, sind diese Funktionen ein großer Vorteil für eine kleine Agentur, die nicht zu viel Zeit damit verbringen kann, eine Unternehmensarchitektur für ihren Stack zu entwerfen.
WordPress hat kürzlich die REST-API im Kernpaket (4.6.0) gebündelt, und so habe ich beschlossen, es für unsere erste Website auszuprobieren.

Es war eine Migration von einem AngularJS-Frontend ...

Teil 2, Ersteinrichtung

Der erste erforderliche Punkt war, dass die Websites so SEO-freundlich wie möglich sind, und zwar aus Angular 1 / 1.5, wo die einzige einfache Lösung prerender.io war (was nicht implementiert wurde).

Ich hatte Nuxt zuvor für ein Nebenprojekt ausprobiert, aber es klickt nur, wenn Sie hart daran arbeiten.

Ich war mit VueJS vertraut, aber das anfängliche Setup für Nuxt ließ mich ein bisschen zweifelhaft an den Fähigkeiten. Es sah zu einfach aus, um wahr zu sein, und ohne Konfiguration von der anfänglichen CLI.

Sie können mit der Installation der vue cli beginnen, wenn Sie dies noch nicht getan haben:

npm install -g vue-cli

(Achten Sie auf vue-cli 3, das bald herauskommt, da dies den folgenden Befehl ändern könnte.)

Dann können Sie mit vue-cli ein neues Nuxt-Projekt starten, indem Sie Folgendes eingeben:

vue init nuxt-community / starter-template 

Wobei Ihr Ordner und Projektname ist.
Sie werden ein Verzeichnis mit mehreren anderen Verzeichnissen und einer nuxt.config.js-Datei erstellen:

Die erste nuxt.config.js-Datei für mein Vue-Meetup-Gespräch

Das erste, was Sie über Nuxt wissen sollten, ist, dass es ein problemloses Framework für VueJS und SSR ist.

Es verwendet nur Module und Bibliotheken, die bereits in VueJS verfügbar sind, organisiert sie jedoch in einer wirklich übersichtlichen Ordnerstruktur.

Ordnerstruktur für ein Nuxt-Projekt

Teil 3, tiefer gehen

Das Hauptproblem war anfangs, wie man Sass integriert und Sass-Variablen in mein Projekt verwendet.
Ich musste diese Hexerei hier machen, um Variablen in jeder einzelnen Dateikomponente (Single File Component, SFC) oder Seite verfügbar zu haben

Dies wurde dann dank eines Nuxt-Moduls, das einfach zu nuxt.config in einem Array mit einer Liste von SASS-Variablen hinzugefügt werden kann, die global geladen werden sollen, viel einfacher.

Der nächste Schritt bestand darin, herauszufinden, wie man den Staat verwaltet.

Aus irgendeinem Grund hielt ich ein globales Mixin für eine gute Idee

In Wirklichkeit ist es bereits an der Zeit, Vuex zu laden, wenn Sie über einige Komponenten verfügen, z. B. eine Navigationsleiste oder einige Modals.

In Nuxt ist das so einfach wie:

index.js im Ordner / store mit einigen Beispielmutationen und nuxtServerInit

Nuxt bietet auch die Möglichkeit, jeden bedeutungsvollen Status vorher mit der Aktion NuxtServerInit im Store zu laden.
Auf diese Weise können Sie alles, was Sie benötigen, vorab abrufen, ohne Mounted zum Laden zu verwenden (und auf diese Weise SSR zu verlieren).

Es gibt andere Methoden, die außerhalb des Speichers verwendet werden können: asyncData (lädt Daten in die Komponente) und fetch (schreibt Mutationen fest oder löst Aktionen aus).

Diese können verwendet werden, wenn Sie etwas nur lokal innerhalb einer Komponente oder Seite benötigen.

asyncData gibt eine neue Dateneigenschaft auf der lokalen .vue-Seite zurückMit Fetch können wir neue Daten von einer API in den Store übertragen

Dabei ist zu beachten, dass es sich um zwei Fälle handelt.
Eine auf dem Server, virtuell und nicht sichtbar, und eine auf der Clientseite.

Dies bedeutet, dass es bei der Entwicklung mit Nuxt und jeder serverseitigen App einige Fallstricke gibt, aber Nuxt macht diese Fallstriche sehr begrenzt und einfach zu überwinden.

Nuxt hat eine -Komponente integriert, die alles andere, einschließlich anderer Komponenten, umschließen kann, sofern Sie ein einzelnes Stammelement enthalten.

no-ssr führt den beiliegenden Code nur clientseitig aus (kein SSR)

Dieses Plug-In ermöglicht, dass das, was sich im Inneren befindet, nur auf der Clientseite ausgeführt wird. Es ist besonders nützlich, wenn Plug-Ins von Drittanbietern verwendet werden, die Verweise auf Fenster- oder DOM-Elemente enthalten und auf der Serverseite nicht benötigt werden.

Wenn Sie dies oder etwas anderes, das ich jetzt zeigen werde, nicht tun, stoßen Sie möglicherweise auf eine andere Baumstruktur, über die Nuxt Sie benachrichtigt:

Die andere Frage ist, wie Bibliotheken und Komponenten in Nuxt geladen werden.
Wir laden sie, indem wir Plugins im Plugin-Ordner erstellen und sie entweder mit Vue.use, Vue.component oder Vue.directive anhängen.

Im zweiten Schritt fügen Sie dieses Plugin in die Datei nuxt.config ein. Hier können Sie festlegen, ob es sich um ein ssr-fähiges Plugin handelt (indem Sie einfach den Pfad zum Plugin eingeben) oder nicht, indem Sie dort ssr: false angeben.

Teil 4: Umgang mit WordPress CMS und API-Aufrufen

Sobald das Hauptprojekt eingerichtet ist und Sie sich mit jeder Seite befassen, ist der schnellste und beste Ansatz meiner Meinung nach das Hinzufügen eines Plugins mit dem Namen:
Erweiterte benutzerdefinierte Felder (ACF)
zum WordPress-Backend.

Dies fügt Seiten und Posts in WordPress benutzerdefinierte Feldfunktionen hinzu.
Um dies auf die REST-API zu erweitern, benötigen Sie auch ein Plugin namens
ACF zu REST API

Einige nützliche Addons:
WP REST API-Filterfelder
Felder filtern Ermöglicht das Filtern der vom API zurückgegebenen Felder.

WP REST API Reine Taxonomien
Dieses Plugin enthält alle verfügbaren Taxonomieattribute in der WordPress REST API (v2) ohne zusätzliche API-Anforderungen.

WP REST API Cache
Aktivieren Sie das Caching für die WordPress REST-API und erhöhen Sie die Geschwindigkeit Ihrer Anwendung. (Ich empfehle die Verwendung dieses Plugins nicht.)
Einschränkung hier:
Stellen Sie sicher, dass Sie dieses Plugin nicht verwenden, wenn Sie Post-Requests durchführen (Beispiel: Kontaktformular-7-Plugin), oder filtern Sie die Zeichenfolge "Kontaktformulare" in functions.php wie folgt:

add_filter ('rest_cache_skip', function ($ skip, $ request_uri) {
  if (! $ skip && false! == stripos ($ request_uri, 'contact-form-7')) {
    return true;
  }
  return $ skip;
}, 10, 2);

WP REST API-Menüs
Erweitert die WP-API um WordPress-Menürouten.

Der nächste Schritt war dann die Konfiguration der API-Endpunkte.
Ich persönlich habe eine config.js-Datei verwendet, die ich wie folgt importieren kann:

importiere Config aus '~ / assets / config';

Auf diese Weise kann ich für alle meine Seiten einen eindeutigen und konfigurierten Endpunktspeicherort festlegen.

Das oben Genannte stammt teilweise von einem Luxusreiseveranstalter, Antilophia.
Die Website ist noch nicht online, aber ich werde sie hier aktualisieren, sobald sie verfügbar ist. Bleib dran ;)

Sobald Sie die obige Konfiguration haben, können Sie die App so konfigurieren, dass sie Daten entweder auf nuxtServerInit oder mit fetch / asyncData abruft.

Damit können Sie dann jeden Abschnitt der Website mit den erweiterten benutzerdefinierten Feldern sowie den übrigen verfügbaren WordPress-API-Feldern füllen (alles, was wirklich zur Verfügung steht).

Der Server aktualisiert den Inhalt jedes Mal, wenn er eine Sitzung für einen Benutzer lädt.

Sie können dynamische Seiten mithilfe der Ordnerstruktur erstellen:
Wobei der Name des gewünschten Parameters ist (zB: destination)

Auf diese Weise können Sie auf den Parameter zugreifen, indem Sie Folgendes verwenden:

this. $ route.params. 

Beispielsweise würde /pages/:mexico/index.vue zurückkehren

this. $ route.params.destination === ‘mexico’

Denken Sie daran, dass Sie in asyncData oder fetch keinen Zugriff auf "this" haben, da es vor dem Laden der Seite ausgeführt wird. Sie können jedoch auf den "context" zugreifen.

async fetch ({app, store, params}) {
  // Dies gibt Ihnen Zugriff darauf, Parameter mit den Kurzparametern zu routen
  // sondern auch in den Laden und die anderen App-Werte
  // überprüfe alle Felder unter https://nuxtjs.org/api/context/
}

Wenn Sie viele API-Aufrufe haben, kann ich zwei Optionen vorschlagen:
- Verwenden Sie ein WP REST-API-Cache-Plugin wie den WP REST-API-Cache
- Aufrufe von nuxtServerInit zwischenspeichern (bevorzugt)

Für letzteres ist es etwas knifflig und erfordert die Verwendung von Lre-Cache-Mechanismen und Axios-Extensions-Paketen.
Eine Übersicht mit allen Dateien finden Sie weiter unten.

Link: https://gist.github.com/bovas85/8b5610ac94dd036628f53f702b300a64

vuex storeFügen Sie diese Erweiterung zu axios hinzu und fügen Sie das Plugin axios.js zu nuxt.config.js hinzu

Dies ist besonders nützlich, wenn Sie eine statische Site generieren (nuxt generate), da nuxtServerInit einmal pro generierter Seite ausgeführt wird (stellen Sie sich vor, wenn Sie 20 dynamische Seiten haben, werden 20 * API-Aufrufe ausgeführt).

Teil 5: Wie wäre es mit der Bereitstellung der App?

Wir haben zwei Routen ausprobiert.
1) Wir haben eine Nuxt-generierte statische Site verwendet, die mit einem regulären Server (nach alter Schule) betrieben wird. Schnell, aber der Nachteil ist, dass das Rendern der dynamischen Routen bei vielen dynamischen Seiten etwas schwierig und langsam ist (lesen Sie hier nach, wie das geht).
2) Wir haben einen von NodeJS gehosteten Dienst wie Now verwendet (es gibt mehrere, oder Sie verwenden Ihr Hosting nur, wenn es NodeJS unterstützt, was wir nicht getan haben).

Ich habe einen Artikel zu einem bestimmten Thema geschrieben, als ich eine Domain auf "Now from GoDaddy" migrierte. Sie können ihn hier lesen:

"Bereitstellen Ihrer SSR-App für Zeit Now von GoDaddy" @MoustacheDsign https://medium.com/@moustachedesign/deploying-your-ssr-app-to-zeit-now-from-godaddy-41b51302375f

Nachdem Sie die CLI installiert haben, geben Sie sie jetzt ein und die SSR-Site wird in Sekunden bereitgestellt (buchstäblich, abhängig von Ihrer Verbindung und der Größe der Site;))

Das Ergebnis ist ein sehr kleines, optimiertes und asynchrones Bundle. Es gibt eine automatische Blockaufteilung für sofort einsatzbereite Seiten, sodass Sie sich nicht mehr um diese kniffligen Blöcke kümmern müssen.

nicht schlecht

Teil 6: Was kommt als nächstes für Vue und Nuxt?

Vue und Nuxt sind keine Newcomer mehr, es gibt ein großes Ökosystem von Plugins, Modulen und Bibliotheken, die verfügbar sind und immer größer werden.

Einige von denen, die ich verwendet habe, beinhalten Plugins für Schieberegler, Karussells, das langsame Laden von Bildern, und die meiste Zeit können sie eingeschlossen werden, auch wenn sie nicht in Nuxt oder sogar Vuejs vorkommen.

Nuxt.js ist ein OpenCollective und finanziert sich selbst.
Wenn Ihnen das so gut gefällt, können Sie unter https://opencollective.com/nuxtjs spenden

Senden Sie Probleme für Nuxt hier (es integriert sich in Github-Probleme, ganz ordentlich!):
https://nuxtjs.cmty.io

Es ist ein Wrap

Haben Sie irgendwelche Fragen?
Wenn ja, können Sie unten einen Kommentar abgeben oder mich über @moustacheDsign twittern

Einige Websites, die ich nach diesem Ansatz erstellt habe:

Wenn Sie Fragen haben, antworten Sie hier oder twittern Sie mich unter @moustacheDsign

Danke von der Katze