Endlich mein erster Post hier auf DEV! :)

Letzte Woche habe ich einen Einführungskurs zu Nuxt.js abgeschlossen, einem auf Vue.js basierenden Framework, das darauf abzielt, das Problem der serverseitigen Darstellung von Seiten zu lösen. Hier sind meine ersten Eindrücke von nuxt.

Was ist das?

Nuxt ist ein Javascript-Framework, das auf vue.js basiert, wobei der Hauptvorschlag, wie ich oben erwähnt habe, darin besteht, das Problem im Zusammenhang mit SEO in SPAs zu lösen, die mit vue.js erstellt wurden. nuxt löst das Problem, indem es statische Seiten auf dem Server generiert, bevor es auf der Client-Seite gerendert wird. Das heißt, der erste Zugriff auf die Seite ist immer statisch, die nächsten Seiten werden jedoch eine gemeinsame SPA sein.

Positive Punkte

• Entwicklern ist bekannt, dass die Konfiguration zum Generieren statischer Seiten mit vue-server-render erforderlich ist verursacht einige Kopfschmerzen. Mit dem Framework ist alles sehr transparent, die Optionen sind bereits so vorkonfiguriert, wie es die Community für am effizientesten hält, und Sie müssen sich nur in ganz bestimmten Fällen darum kümmern.

• Die Dateistruktur ist sehr gut definiert. In Bezug auf vue-Komponenten gibt es 3 Ordner:layouts , pages und components .

  • Der erste Ordner dient zum Definieren der globalen Layouts Ihrer Seiten. Eine Eigenschaft namens layout kann auf Seiten verwendet werden, um das zu verwendende Layout zu definieren, andernfalls wird das Standardlayout verwendet.
  • Der Ordner pages Hier konzentrieren sich die Anwendungsseiten. In diesem Ordner passiert die Magie. Jede darin enthaltene Datei und jeder Unterordner wird automatisch einer Anwendungsroute zugeordnet. Strukturieren Sie Ihre Dateien also einfach so, als wären sie die URL-Pfade. Wenn Ihre URL einen dynamischen Teil hat, fügen Sie einfach einen _ hinzu zum Ordnernamen, wird dieser Parameter automatisch der betreffenden Seitenkomponente zugeordnet.
  • Im Verzeichnis components sind die Komponenten, aus denen die Seiten bestehen.

• Das Framework ist leicht erweiterbar. Durch Plugins ist es möglich, neue Funktionalitäten und externe Module hinzuzufügen.

• Sie können Code auf dem Server ausführen, bevor die Seite gerendert wird. Durch die Aktion nuxtServerInit und Umgebungsvariable process.client Sie können Code auf dem Knotenserver ausführen, der die Seiten rendert. Eine Beispielanwendung hierfür ist eine Anfrage an eine API, um den Inhalt einer Seite zu sammeln und vor dem Rendern zu füllen.

• Es ist möglich, eine gemeinsame SPA ohne SSR aufzubauen. Wenn Ihre Anwendung kein SSR benötigt, können Sie die gesamte Struktur und Vorkonfigurationen des Frameworks, wie z. B. vuex, Router, Plugins usw., in Ihrem SPA verwenden.

Negativpunkt

• Die Anzahl der Dateien index.vue . Wenn Ihre Anwendung wächst, wächst auch die Anzahl der Ordner. Jeder Ordner, der eine Route in Ihrer Anwendung darstellt, muss eine Datei index.vue haben die in die Basis-Subroute dieses Verzeichnisses übersetzt werden. Das macht es meiner Meinung nach schwierig/verwirrend, die Dateien im Editor zu finden.

Dies sind meine ersten Erkenntnisse über das Framework. Es hat mir sehr gut gefallen und ich hoffe, es bald in einer echten Anwendung einsetzen zu können.

Und Sie, kennen Sie Nuxt? Hast du es benutzt? Was denkst du? Sag es mir in den Kommentaren!

Umarmungen und noch mehr!