So bauen Sie ein Vue -Frontend für ein kopfloses CMS

Erstellen Sie eine moderne und effiziente Blog -Plattform: Die perfekte Kombination von Vue.js und Graphcms

Kernpunkte:

• Verwenden Sie Vue.js und Graphcms, um eine moderne und effiziente Blog -Plattform zu erstellen, wodurch die Geschwindigkeit und Flexibilität von JavaScript und die leistungsstarken Abfragefunktionen von GraphQL komplett gespielt werden.
• GraphCMS wird ausgewählt, da es in der Lage ist, Inhalte über GraphQL zu bedienen, was in der Effizienz besser als herkömmliche Ruhe ist, da komplexe Abfragen in einer Anforderung Daten aus mehreren Modellen extrahieren können.
• Richten Sie Ihr Vue.js-Projekt mit Vue CLI ein, einschließlich grundlegender Funktionen wie Babel und Router, und verbessern Sie UI-Komponenten mit Bootstrap-Vue und Axios für die API-Interaktion.
• Implementieren Sie das dynamische Routing in Vue.js, um verschiedene Inhaltskategorien und individuelle Postansichten zu verarbeiten, um ein nahtloses Benutzernavigationserfahrung zu gewährleisten.
• Get & Anzeige Artikel von GraphCMs, indem Sie GraphQL -Abfragen erstellen, die Artikel basierend auf Kategorien oder einzelnen Schnecken abrufen und diese Abfragen in Vue.js -Komponenten integrieren.
• Verwenden Sie GraphQL -Mutationen, um neue Kommentare zu erstellen und die Benutzeroberfläche sofort zu aktualisieren, ohne dass die Seite neu lädt, und erweitern Sie die interaktiven Funktionen des Blogs, z. B. das Kommentarsystem.

Mit diesem Handbuch erstellt Sie mit Vue.js und GraphCMS (einer kopflosen CMS -Plattform) eine moderne Blog -Website.

Wenn Sie heute schnell ein Blog starten möchten, schlage ich vor, dass Sie WordPress direkt verwenden.

Aber was ist, wenn Sie ein Medienriese sind und Ihre Inhalte so schnell wie möglich an mehrere Geräte liefern möchten? Möglicherweise müssen Sie Ihre Inhalte auch in Werbung und andere Dienste von Drittanbietern integrieren. Sie können dies mit WordPress tun, aber Sie werden auf einige Probleme mit dieser Plattform stoßen.

1. Sie müssen Plugins installieren, um zusätzliche Funktionen zu implementieren. Je mehr Plugins Sie installieren, desto langsamer wird Ihre Website.
2. PHP ist im Vergleich zu den meisten JavaScript -Web -Frameworks sehr langsam. Aus Sicht eines Entwicklers ist es viel einfacher und schneller, benutzerdefinierte Funktionen auf einem auf JavaScript basierenden Front-End zu implementieren.

In Browser -Ladetests führt JavaScript besser ab als PHP. Darüber hinaus bieten das moderne JavaScript und sein Ökosystem eine angenehmere Entwicklungserfahrung beim rasanten Aufbau neuer Web -Erlebnisse.

Möchten Sie Vue.js von Grund auf lernen? Dieser Artikel wird aus unserer fortgeschrittenen Bibliothek ausgehalten. Treten Sie jetzt SidePoint Premium bei, um eine vollständige Sammlung von Vue -Büchern zu erhalten, die Grundlagen, Projekte, Tipps und Tools für nur 9 US -Dollar pro Monat abdecken.

Die Anzahl der kopflosen CMS -Lösungen (die nur das Backend zur Verwaltung von Inhalten verwendet wird) ist gewachsen. Mit diesem Ansatz können sich Entwickler darauf konzentrieren, schnelle und interaktive Frontends mithilfe ihres ausgewählten JavaScript-Frameworks aufzubauen. Das Anpassen eines auf JavaScript-basierten Front-Ends ist viel einfacher, als eine WordPress-Website zu ändern.

Der Unterschied zwischen GraphCMS und den meisten kopflosen CMS -Plattformen besteht darin, dass er Inhalte anstelle von Ruhe, sondern über GraphQL serviert. Diese neue Technologie ist besser als sich ausruhen, da es uns ermöglicht, Abfragen zu erstellen, bei denen Daten zu mehreren Modellen in einer Anfrage gehören.

Betrachten Sie das folgende Modellmuster:

Artikel

• id: number
• Titel: String
• Inhalt: String
• Kommentare: Kommentare Array

Kommentare

• id: number
• Name: String
• Nachricht: String

Das obige Modell hat einen Eins-zu-Many (Artikel zum Kommentar). Lassen Sie uns sehen, wie Sie einen einzelnen Artikel -Datensatz mit allen beigefügten Link -Kommentar -Datensätzen erhalten.

Wenn sich die Daten in einer relationalen Datenbank befinden, müssen Sie eine ineffiziente SQL -Anweisung erstellen oder zwei SQL -Anweisungen konstruieren, um die Daten sauber zu erhalten. Wenn die Daten in einer NoSQL -Datenbank gespeichert sind, können Sie die Daten für Sie problemlos mit einem modernen Orm -wie Vuex ORM abrufen, wie unten gezeigt:

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

sehr einfach! Sie können diese Daten problemlos über Ruhe an den Zielclient weitergeben. Das Problem ist jedoch: Wenn sich die Datenanforderungen des Kunden ändern, werden Sie gezwungen, zu Ihrem Backend -Code zurückzukehren, um Ihren vorhandenen API -Endpunkt zu aktualisieren, oder einen neuen Endpunkt erstellen, der den erforderlichen Datensatz bereitstellt. Dieser Hin- und Her -Prozess ist sowohl mühsam als auch wiederholend.

Wenn Sie auf Kundenebene nur die Daten anfordern, die Sie benötigen, ohne dass Sie die zusätzliche Arbeit erledigen, werden Ihnen das Backend die Daten zur Verfügung stellt? Dazu ist GraphQL.

Voraussetzungen

Bevor wir anfangen, möchte ich darauf hinweisen, dass dieser Leitfaden für fortgeschrittene Benutzer ist. Ich werde die Grundlagen nicht erklären, sondern zeigen Ihnen, wie Sie schnell ein Vue.js -Blog mit GraphCMs als Backend erstellen. Sie müssen in den folgenden Bereichen kompetent sein:

• ES6 und ES7 JavaScript
• vue.js (mit CLI Version 3)
• GraphQl

Dies ist alles, was Sie wissen müssen, um dieses Tutorial zu beginnen. Auch das Hintergrundwissen über die Verwendung von Ruhe wird sehr nützlich sein, da ich es oft zitieren werde. Wenn Sie es überprüfen möchten, kann dieser Beitrag helfen: "REST 2.0 ist hier, sein Name ist GraphQL".

über das Projekt

Wir werden eine sehr einfache Blog -Anwendung mit einem grundlegenden Kommentarsystem erstellen. Hier sind die Links, auf die abgeschlossene Projekte angezeigt werden können:

• codesandbox.io Demo
• Github Repository

Beachten Sie, dass in der Demo nur schreibgeschützte Token verwendet werden, sodass das Kommentarsystem nicht funktioniert. Sie müssen Ihr offenes Erlaubnis -Token und Ihren Endpunkt bereitstellen, wie in diesem Tutorial beschrieben, damit es funktioniert.

Erstellen Sie die GraphCMS -Projektdatenbank

Gehen Sie zur GraphCMS -Website und klicken Sie auf die Schaltfläche "Kostenlos erstellen". Sie werden zu ihrer Registrierungsseite gebracht.

Registrieren Sie sich mit Ihrer bevorzugten Methode. Nach Abschluss des Kontosauthentifizierungs- und Überprüfungsprozesses sollten Sie in der Lage sein, auf das Haupt -Dashboard zugreifen zu können.

Im obigen Beispiel habe ich ein Projekt namens "blogdb" erstellt. Erstellen Sie weiterhin ein neues Projekt und nennen Sie es so, wie Sie möchten. Nach dem Eingeben eines Namens können Sie die verbleibenden Felder als Standardwerte hinterlassen. Klicken Sie auf , um zu erstellen, und Sie werden ihren Projektplan eingeben.

Wählen Sie in diesem Tutorial den kostenlosen Entwicklerplan aus und klicken Sie auf , um fortzusetzen. Sie werden das Dashboard des Projekts wie unten gezeigt eingeben:

Gehen Sie zur Registerkarte Modus . Wir werden die folgenden Modelle mit jeweils folgenden Feldern erstellen:

Kategorie

• Name: Einzellinientext, erforderlich, eindeutig

Artikel

• Slug: Einzellinientext, erforderlich, eindeutig
• Titel: Einzellinientext, erforderlich, eindeutig
• Inhalt: Multi-Line-Text

Kommentare

• Name: Einzellinientext, erforderlich
• Nachricht: Mehrere Textzeilen, erforderlich

Erstellen Sie ein Modell mit ein Modell erstellen . Auf der rechten Seite sollten Sie ein verstecktes Panel für Felder finden, die durch Klicken auf die Taste Feld aktiviert werden können. Ziehen Sie den entsprechenden Feldtyp auf das Modell des Modells. Sie sehen ein Formular, um die Eigenschaften des Feldes auszufüllen. Beachten Sie, dass sich unten eine rosa Taste erweitert

befindet. Wenn Sie darauf klicken, erweitern Sie das Panel und erhalten Sie mehr Feldeigenschaften, die aktiviert werden können.

Als nächstes müssen Sie die Beziehung zwischen Modellen wie folgt hinzufügen:

Artikel & GT;
• Artikel & GT;

Definieren Sie diese Beziehung mit dem Feld

Referenz . Sie können dieses Feld auf beiden Seiten hinzufügen. Nach Abschluss der Modelldefinition sollten Sie den folgenden Inhalt haben:

Sie haben jetzt den ersten Teil abgeschlossen. Lassen Sie uns nun einige Daten für unser Modell angeben.

GraphQL Data Migration

Um dem Modell Inhalte hinzuzufügen, können Sie einfach auf die Registerkarte

inhalts im Projekt -Dashboard klicken, auf dem Sie für jedes Modell neue Datensätze erstellen können. Wenn Sie dies jedoch für einen langsamen Ansatz finden, werden Sie sich freuen zu wissen, dass ich ein GraphCMS -Migrationstool erstellt habe, mit dem Daten aus CSV -Dateien kopiert und in Ihre GraphCMS -Datenbank hochgeladen werden können. Sie finden das Projekt in diesem Github -Repository. Um mit dem Projekt zu beginnen, laden Sie es einfach wie folgt in Ihren Arbeitsbereich herunter:

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

Als nächstes müssen Sie den API -Endpunkt und den Token für Ihr GraphCMS -Projekt aus der Seite Einstellungen des Dashboards erhalten. Sie müssen ein neues Token erstellen. Verwenden Sie für Berechtigungsstufen offen, da das Tool Lese- und Schreiben von Operationen in Ihrer GraphCMS -Datenbank durchführen kann. Erstellen Sie eine Datei namens .env und platzieren Sie sie in das Stammverzeichnis des Projekts:

<code class="language-bash">git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install</code>

Als nächstes müssen Sie die CSV -Datei im Datenordner mit Ihren eigenen Daten möglicherweise füllen. Hier sind einige Beispieldaten, die verwendet wurden:

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

Sie können den Inhalt nach Bedarf ändern. Stellen Sie sicher, dass Sie die obere Zeile nicht berühren, sonst ändern Sie den Feldnamen. Beachten Sie, dass ich für die Kategoriespalte den Pipeline als Trennzeichen verwendet habe.

Um CSV -Daten in Ihre GraphCMS -Datenbank hochzuladen, führen Sie die folgenden Befehle in der folgenden Reihenfolge aus:

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

Jedes Skript wird die erfolgreich hochgeladenen Datensätze ausdrucken. Der Grund, warum wir die Kategorien zuerst hochladen, besteht darin, dass die Artikelaufzeichnungen erfolgreich mit vorhandenen Kategorienaufzeichnungen verknüpft werden.

Wenn Sie Ihre Datenbank reinigen möchten, können Sie den folgenden Befehl ausführen:

<code class="language-bash">npm run categories
npm run posts</code>

Dieses Skript löscht den Inhalt aller Modelle. Sie erhalten einen Bericht, in dem angegeben ist, wie viele Datensätze jedes Modell gelöscht haben.

Ich hoffe, Sie finden dieses Tool sehr bequem. Kehren Sie zum Dashboard zurück, um die Anzahl der Artikel und Kategorien

zu bestätigen

Die Daten wurden erfolgreich hochgeladen.

Das Backend wird verarbeitet. Lassen Sie uns unsere Front-End-Blog-Schnittstelle erstellen.

Erstellen Sie das Front-End eines Blogs mit Vue.js

Wie bereits erwähnt, werden wir eine sehr einfache Blog -Anwendung erstellen, die vom GraphCMS -Datenbank -Backend unterstützt wird. Starten Sie das Terminal und navigieren Sie zu Ihrem Arbeitsbereich.

Wenn Sie Vue CLI nicht installiert haben, installieren Sie es jetzt:

<code class="language-bash">npm run reset</code>

Erstellen Sie dann ein neues Projekt:

<code class="language-bash">npm install -g @vue/cli</code>

Wählen Sie die manuelle Auswahlfunktion aus und wählen Sie die folgenden Optionen:

• Funktion: Babel, Router
• Routenverlaufsmodus: y
• Verwenden Sie nur ESLINT für die Fehlerverhütung
• FININT überprüfen, wenn Sie
speichern
• Profilspeicherort: Dedizierte Konfigurationsdatei
• Voreinstellung speichern: Ihre Wahl

Wechseln Sie nach Abschluss des Projekterstellungsprozesses in das Projektverzeichnis und installieren Sie die folgenden Abhängigkeiten:

<code class="language-bash">vue create vue-graphcms</code>

Um die Bootstrap-view in unserem Projekt einzurichten, öffnen Sie einfach src/main.js und fügen Sie den folgenden Code hinzu:

<code class="language-bash">npm install bootstrap-vue axios</code>

Als nächstes müssen wir mit dem Aufbau der Projektstruktur beginnen. Löschen Sie im Ordner SRC/Komponenten vorhandene Dateien und erstellen Sie diese neuen Dateien:

• commentform.vue
• commentIl.vue
• post.vue
• postlist.vue

löschen Sie im Ordner SRC/Views über.vue und erstellen Sie eine neue Datei namens postview.vue. Wie Sie aus der Demo sehen können, haben wir mehrere Kategorienseiten, die jeweils eine Liste von Artikeln zeigen, die von der Kategorie gefiltert werden. Technisch gesehen zeigt nur eine Seite eine andere Liste von Artikeln an, die auf dem aktiven Routennamen basieren. Die Post -Liste -Komponente filtert Artikel basierend auf der aktuellen Route.

Lassen Sie uns zuerst die Route einrichten. Öffnen Sie src/router.js und ersetzen Sie den vorhandenen Code durch diesen Code:

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

Nachdem wir die Route haben, richten wir das Navigationsmenü ein. Öffnen Sie SRC/App.vue und ersetzen Sie den vorhandenen Code durch diesen Code:

<code class="language-bash">git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install</code>

Dies fügt eine Navigationsleiste oben auf unserer Website mit Links zu unseren verschiedenen Kategorien hinzu.

Speichern Sie die Datei und aktualisieren Sie die folgenden Dateien entsprechend:

src/views/home.vue

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

src/components/postlist.vue

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

Beachten Sie, dass wir in der Post -Liste -Komponente einen benutzerdefinierten Beobachter verwenden, um unsere Kategoriedatenattribute basierend auf der aktuellen URL zu aktualisieren.

Wir können jetzt einen kurzen Test durchführen, um zu bestätigen, dass das Routing ordnungsgemäß funktioniert. Verwenden Sie den Befehl npm run dienen zum Starten des Vue.js -Servers. Öffnen Sie den Browser bei Localhost: 8080 und testen Sie jede Navigationsverbindung. Die Kategorie -Eigenschaft sollte denselben Wert ausgeben, den wir in der Routennameneigenschaft definiert haben.

Daten aus GraphCMS

extrahieren

Jetzt, da unser Routing -Code funktioniert, lassen Sie uns sehen, wie Informationen aus unserem GraphCMS -Backend extrahiert werden. Erstellen Sie im Projekt des Projekts eine env.local -Datei und füllen Sie sie mit den Werten der folgenden Felder aus:

<code class="language-bash">npm run categories
npm run posts</code>

Beachten Sie, dass die Anwendung von VUE.js einzelne Seiten nur benutzerdefinierte Umgebungsvariablen lädt, beginnend mit VUE_APP. Sie finden die API -Endpunkte und Token auf der Seite "Graphcms -Dashboard -Einstellungen". Stellen Sie für Token ein Token mit offenen Berechtigungen ein, da es Lesen und Schreiben von Operationen ermöglicht. Erstellen Sie als Nächstes die Datei SRC/Graphcms.js und kopieren Sie den folgenden Code:

<code class="language-bash">npm run reset</code>

Die gerade erstellte Hilfsdatei enthält zwei Hauptfunktionen:

• Es wird eine Instanz von Axios erstellt, die so konfiguriert sind, dass Sie Autorisierungsanforderungen in Ihrem GraphCMS -Backend durchführen.
• Es enthält GraphQL -Abfragen und -Mutationen, die in diesem Projekt verwendet werden. Sie sind dafür verantwortlich, Artikel (nach Kategorie oder Slug) zu erhalten und neue Kommentare zu erstellen. Wenn Sie mehr über GraphQL -Abfragen und Mutationen erfahren möchten, wenden Sie sich bitte an die Dokumentation von GraphQL.

Sie können den API -Explorer auch im Projekt -Dashboard verwenden, um diese Abfragen und Mutationen zu testen. Kopieren Sie dazu die Abfrage oder Mutation aus dem obigen Code und fügen Sie sie in das obere Fenster des API -Explorers ein. Geben Sie alle Abfragevariablen in das folgende Fenster ein und klicken Sie auf die Schaltfläche abspielen. Sie sollten die Ergebnisse im neuen Bereich rechts sehen.

Dies ist ein Abfragebeispiel:

Dies ist ein Beispiel für Variation:

Daten in Vorlage

anzeigen

Erstellen wir nun eine HTML -Vorlage in SRC/components/Postlist.vue, in der die Postliste auf präzise Weise angezeigt wird. Wir werden auch Axios -Code hinzufügen, der Artikeldaten aus unserer GraphCMS -Datenbank extrahiert:

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

Schauen wir uns einen kurzen Blick auf die Hauptfunktionen des Codes an:

• Laden. Wenn eine Anfrage gestellt wird, wird ein Lastspinner angezeigt, um dem Benutzer anzuzeigen, dass einige Vorgänge ausgeführt werden. Nach Abschluss der Anfrage wird der Lastspinner durch die Artikelliste ersetzt.
• Abfrage. Um die Liste der Artikel nach Kategorie zu erhalten, fand ich es einfacher, Kategorien abzufragen, und verwenden Sie dann die Beziehung zwischen Kategorie und Post, um auf die gefilterten Artikel zuzugreifen.
• erstellen. Die Funktion fetchPosts () wird aus dem erstellten Lebenszyklushaken aufgerufen, wenn die Seite zum ersten Mal geladen wird.
• Beobachtung. Wenn sich die Routing -URL ändert, wird jedes Mal die Funktion fetchPosts () aufgerufen.

Nachdem Sie diese Änderungen vorgenommen haben, sollten Sie jetzt die folgende Ansicht sehen:

Zeigen Sie den einzelnen Artikel

Stellen Sie sicher, dass die oberste Hauptnavigation wie erwartet funktioniert. Lassen Sie uns nun mit der Postkomponente umgehen. Es wird eine eigene FetchPost () -Funktion haben, die nach Slug abfragt. Wenn Sie wissen möchten, woher der Slug -Parameter kommt, lassen Sie mich Sie an diesen Code erinnern, den wir in Router hinzugefügt haben.js:

<code class="language-bash">git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install</code>

Dies bedeutet, dass alles nach / post / in der URL in der Komponente als diese verwendet werden kann. $ Route.params.slug.

Die Postkomponente ist die übergeordnete Komponente der Kommentar- und Kommentarkomponenten. Kommentardaten werden als Requisiten aus dem Artikelaufzeichnung an die Kommentarkomponente übergeben. Fügen wir nun den Code von SRC/Komponenten/Kommentieren ein.

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

Erwarten Sie jetzt keine Ergebnisse, es sei denn, Sie haben die Kommentare durch das Dashboard von GraphCMS manuell eingegeben. Fügen wir SRC/Komponenten/commentform.vue Code hinzu, mit der Benutzer Blog -Posts zu Kommentaren hinzufügen können:

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

Jetzt haben wir ein grundlegendes Kommentarformular, das neue Kommentare an unser GraphQL -Backend -System senden kann. Nach dem Speichern eines neuen Kommentars erhalten wir das zurückgegebene Objekt und fügen es dem Post.com -Array hinzu. Dies sollte die Kommentarkomponente auslösen, um neu hinzugefügte Kommentare anzuzeigen.

Erstellen wir nun die SRC/Komponenten/post.vue -Komponente:

<code class="language-bash">npm run categories
npm run posts</code>

Schließlich ist hier der Code für SRC/Views/postview.vue, um alles zusammenzubringen:

<code class="language-bash">npm run reset</code>

Sie sollten jetzt die Ansicht des Artikels sehen. Achten Sie auf das Ende der URL: Slug: Localhost: 8080/Post/Fashion-Post-1:

Im obigen Beispiel habe ich einige Kommentare hinzugefügt, um neue Funktionen zu testen. Stellen Sie sicher, dass Sie dasselbe tun.

Zusammenfassung

Ich hoffe, Sie haben gesehen, wie einfach es ist, eine Blog -Website mit Vue.js und GraphQL zu erstellen. Wenn Sie Plain PHP und MySQL verwendet haben, schreiben Sie mehr Code. Selbst mit dem PHP -Framework müssen Sie noch mehr Code für einfache Blogging -Anwendungen schreiben.

Für die Zwecke dieses Tutorials muss ich es so einfach wie möglich halten. Sie können feststellen, dass dieses Blog -Projekt weit davon entfernt ist, das einfachste Blog -Setup zu erreichen. Wir haben nicht viele Probleme gelöst, z. B. Fehlerbehandlung, Formularvalidierung und Caching. Für den letzten Teil empfehle ich den Apollo -Client, da er einen Mechanismus hat, um die Ergebnisse der GraphQL -Abfrage zu leiten. Dann sind natürlich ein Autorenmodell und ein geeignetes Kommentarsystem erforderlich, das Authentifizierung und Nachrichtengenehmigung unterstützt.

Wenn Sie es vorziehen, verbessern Sie bitte diesen einfachen Vue.js -Graphcms -Blog.

FAQs (FAQ) über kopfloses CMS und Vue.js

Was sind die Vorteile der Verwendung kopfloser CMS und Vue.js?

mit kopflosen CMS und Vue.js haben viele Vorteile. Erstens bietet es ein flexibleres und effizienteres Content -Management -System. Es trennt das Backend und das Frontend, sodass Entwickler beide Enden unabhängig umgehen können. Diese Trennung bedeutet auch, dass CMS Inhalte für jede Plattform bereitstellen kann, nicht nur einer Website. Zweitens ist Vue.js ein progressives JavaScript -Framework, das leicht zu verstehen ist und in vorhandene Projekte integriert ist. Es bietet eine einfache und flexible API, die es zum perfekten Übereinstimmung mit kopflosen CMS macht.

Wie kann man kopfloses CMS in Vue.js integrieren?

Das Integrieren von kopflosen CMs in Vue.js umfasst mehrere Schritte. Zunächst müssen Sie ein kopfloses CMS auswählen, das die API-basierte Kommunikation unterstützt. Als nächstes müssen Sie Ihr Vue.js -Projekt einrichten und die erforderlichen Abhängigkeiten installieren. Sie können dann die API des CMS verwenden, um den Inhalt zu erhalten und ihn in Ihrer VUE.JS -Anwendung anzuzeigen. Einige CMS bieten auch SDKs oder Plugins an, um diese Integration zu vereinfachen.

Kann ich kopfloses CMS mit Vue.js verwenden?

Ja, solange das kopflose CMS die API-basierte Kommunikation unterstützt, können Sie alle kopflosen CMS mit Vue.js. Dies liegt daran, dass Vue.js ein Front-End-Rahmen ist, das mit dem Back-End (in diesem Fall CMS) kommuniziert. Einige beliebte kopflose CMSS, die Sie mit Vue.js verwenden können, umfassen Strapi, Vernunft und Buttercs.

Was sind die Beispiele für Projekte, die kopfloses CMS und Vue.js verwenden?

Es gibt viele Projekte, die kopflosen CMS und VUE.JS. Diese Projekte reichen von Blogs und E-Commerce-Websites bis hin zu vollwertigen Webanwendungen. Einige Beispiele sind eine Vue.js-Dokumentseite mit VuePress (ein Vue-basierter statischer Website-Generator) und eine Storyblok-Site mit Storyblok (ein kopfloses CMS) und Nuxt.js (ein Vue.js-Framework).

Wie verbessert kopfloses CMS die Leistung von VUE.JS -Anwendungen?

kopfloses CMS kann die Leistung von VUE.JS -Anwendungen erheblich verbessern. Durch die Trennung des Backends und des Frontend ermöglicht es eine effizientere Bereitstellung von Inhalten. CMS kann nur den erforderlichen Inhalt liefern, wodurch die Datenmenge reduziert wird, die übertragen und verarbeitet werden müssen. Dies kann zu schnelleren Seitenladezeiten und einer reibungsloseren Benutzererfahrung führen.

Ist es schwierig, in einem Vue.js -Projekt von einem herkömmlichen CMS zu einem kopflosen CMS zu migrieren?

Die Schwierigkeit, in einem VUE.JS -Projekt von einem traditionellen CMS zu einem kopflosen CMS zu migrieren, hängt von der Komplexität des Projekts und dem verwendeten CMS ab. Die meisten kopflosen CMSS bieten jedoch Tools und Dokumentation, um den Migrationsprozess zu unterstützen. Da Vue.js ein flexibles und modulares Rahmen ist, kann es sich häufig an solche Migrationen anpassen, ohne dass sich der vorhandene Code wesentlich ändert.

Kann kopfloses CMS mit Vue.js mehrere Sprachen unterstützen?

Ja, kopfloses CMS mit Vue.js kann mehrere Sprachen unterstützen. Viele kopflose CMSS bieten integrierte mehrsprachige Unterstützung, sodass Sie Inhalte in verschiedenen Sprachen verwalten können. In Bezug auf Vue.js können Sie Bibliotheken wie VUE-I18N verwenden, um die Internationalisierung zu bewältigen.

Was ist die Sicherheitsleistung von kopflosen CMS mit Vue.js?

mit Vue.js 'kopfloser CMS kann sehr sicher sein. Die Trennung von Backend und Frontend fügt eine zusätzliche Sicherheitsebene hinzu, da sie die Angriffsfläche reduziert. Darüber hinaus bieten die meisten kopflosen CMS leistungsstarke Sicherheitsfunktionen wie SSL -Verschlüsselung, Benutzerauthentifizierung und Zugriffskontrolle. Vue.js verfügt auch über integrierte Schutzmaßnahmen für gemeinsame Webanfälligkeiten.

Kann ich kopfloses CMS mit Vue.js für die Entwicklung mobiler Anwendungen verwenden?

Ja, Sie können kopfloses CMS mit Vue.js für die Entwicklung mobiler Anwendungen verwenden. Da das kopflose CMS Inhalt über die API bietet, kann es Inhalte für jede Plattform bereitstellen, einschließlich mobiler Anwendungen. VUE.JS kann verwendet werden, um mobile Anwendungen mithilfe von Frameworks wie NativeScript oder Weex zu entwickeln.

Was ist die zukünftige Entwicklung der Verwendung kopfloser CMS und Vue.js?

Die zukünftigen Entwicklungsaussichten für die Verwendung kopfloser CMS und Vue.js sind breit. Beide Technologien wachsen die Penetrationsraten und werden in immer mehr Projekten eingesetzt. Die Flexibilität und Effizienz dieser Kombination sowie Leistungsvorteile machen es zu einer leistungsstarken Wahl für die moderne Webentwicklung. Da mehr Entwickler mit diesen Technologien vertraut sind, können wir erwarten, dass innovativere Nutzungen und Integrationen erfolgen.

Das obige ist der detaillierte Inhalt vonSo bauen Sie ein Vue -Frontend für ein kopfloses CMS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!