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:

const post = Post.query()
  .with('comments')
  .find(1);

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:

const post = Post.query()
  .with('comments')
  .find(1);

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:

git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install

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權(quán)限令牌></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:

npm run categories
npm run posts

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:

npm run reset

Erstellen Sie dann ein neues Projekt:

npm install -g @vue/cli

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:

vue create vue-graphcms

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

npm install bootstrap-vue axios

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:

const post = Post.query()
  .with('comments')
  .find(1);

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

git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install

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權(quán)限令牌></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:

npm run categories
npm run posts

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:

npm run reset

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:

const post = Post.query()
  .with('comments')
  .find(1);

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:

git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install

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權(quán)限令牌></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:

npm run categories
npm run posts

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

npm run reset

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!