Vor kurzem habe ich mich in Vue.js einzelne Dateikomponenten verliebt. Es ist so viel schöner, die Vorlagen und Stile einer Komponente nahe beieinander zu haben, und ich stelle fest, dass ich jetzt viel weniger Fehler schreibe, da es so einfach ist, Teile einer Seite zu komponieren und an mehreren Stellen zu verwenden.
Ich frage mich, ob ich diese Ein-Datei-Komponentenstruktur zum Generieren statischer HTML-Seiten ohne Vue erweitern könnte.
Beispiel: Ich möchte eine Seite mit einem Hauptdivider "Inhalt" haben, der eine Kopfzeile, einen Abschnitt und eine Fußzeile enthält. Mit Vue.js kann ich "header" -, "section" - und "footer" -Komponenten erstellen und JavaScript verwenden, um sie nach dem Laden der Seite instanziieren zu lassen. Da jeder Teil der Seite in einer eigenen Komponente ist, gibt es keine Möglichkeit, dass CSS in einer Komponente eine andere beeinflusst, und ich habe einen viel saubereren Baum von Dateien zum Bearbeiten.
Dies scheint jedoch ein wenig verschwenderisch zu sein, da diese Komponenten nicht wirklich interaktiv sind: Ich verwende nicht v-model oder v-bind oder v-on , ich benutze nur Vue.js, weil es mich trennen kann Stücke von Seiten heraus. Es bedeutet auch, dass meine Seite überhaupt nicht funktioniert, wenn JavaScript deaktiviert ist, da jedes einzelne Element (speichert das Hauptinhaltsdiv) davon abhängt, dass Vue verfügbar ist.
Gibt es also eine Möglichkeit, .vue-Dateien zu kompilieren, und nicht eine Seite, die diese Komponenten zur Laufzeit mit Vue.js lädt, sondern HTML- und CSS-Dateien, die ohne JavaScript rendern, voneinander trennt?
Idealerweise hätte ich eine Komponente 'greeting.vue':
%Vor%Wird auf einer Seite verwendet:
%Vor%Und diese würden in zwei Dateien kompilieren: eine HTML-Seite mit der kompilierten und vorgerenderten Vorlage und eine CSS-Datei, die die Stile für alle Komponenten enthält. Ich könnte dann das generierte Stylesheet in die Seite einfügen und alle Komponenten würden gestylt.
Ich habe vue-loader und vueify , aber ich kann nicht verstehen, was sie tun, da ich Webpack oder Browserify nicht genug benutzt habe.
Ist das, was ich versuche, möglich?
Was Sie suchen, ist Server Side Rendering. Ich würde Ihnen empfehlen, sich Nuxt.js anzuschauen.
Korrekte Konfiguration aller diskutierten Aspekte eines produktionsfertigen Server-gerenderte App kann eine entmutigende Aufgabe sein. Zum Glück gibt es ein ausgezeichnetes Gemeinschaftsprojekt, das all dies erleichtern soll: Nuxt.js Nuxt.js ist ein übergeordnetes Framework, das auf dem Vue basiert Ökosystem, das eine extrem schlanke Entwicklung bietet Erfahrung beim Schreiben von universellen Vue-Anwendungen. Besser noch, du kannst verwenden Sie es sogar als statischen Site Generator (mit Seiten, die als Single-File Vue-Komponenten)! Wir empfehlen sehr, es auszuprobieren.
Es ist super einfach, es zu starten . Wenn Sie vue-cli verwenden:
Es kommt mit allem, was Sie normalerweise brauchen (Vuex, Router, ..). Denken Sie daran, dass es eine Ordnerstruktur erzwingt, der Sie folgen müssen.
Hier ist die Liste der Befehle, die im Starter enthalten sind.
%Vor% Sie werden wahrscheinlich meistens in generate iterested sein, so wie es
Erstellen Sie die Anwendung und generieren Sie jede Route als HTML-Datei (used für statische Hosting).
Es ist auch eine coole Sache zu beachten, dass das Projekt (zum Zeitpunkt der Erstellung dieses Artikels) aktiv entwickelt ist und wir können uns auf weitere tolle Features freuen!
Aus dem offiziellen vuejs-Führer:
Wenn Sie Webpack verwenden, können Sie das Prerendering ganz einfach mit dem prerender-spa-plugin hinzufügen. Es wurde ausgiebig mit Vue-Apps getestet - und der Entwickler ist sogar ein Mitglied des Vue-Kernteams.
Ich würde sagen, dass Sie dies nicht tun können, weil Vue ein virtuelles DOM verwendet, es nicht Vorlagen zu HTML kompiliert, sondern zu JavaScript render functions , das notwendig ist, um das DOM beim Aktualisieren von Daten effizient zu patchen .
Ich bin mir sicher, dass man mit etwas node magic etwas tun kann, um Dateien zu parsen und auszugeben, aber das wäre ein ziemlich großes Unterfangen für etwas, das nur einen minimalen Effekt hätte. p>