So erstellen Sie eine serverlose CMS-basierte Vue.js-Anwendung

Foto von 贝莉 贝莉 NG auf Unsplash

Vue.js wird aus gutem Grund immer beliebter und immer beliebter. Als schrittweise anpassbares Framework ist es leichtgewichtig, reaktiv und komponentenbasiert und ermöglicht es Ihnen, steckbare Komponenten zu erstellen, die Sie jedem Projekt hinzufügen können.

Das progressive Framework von Vue.js eignet sich gut für serverlose Anwendungsarchitekturen. Entwickler wenden sich zunehmend serverlosen Architekturen zu, da sie mit Serverless Produkte schneller erstellen und optimieren können, ohne die Belastungen (Serverwartung, Ausfälle und Skalierungsengpässe) herkömmlicher serverbasierter Architekturen zu tragen.

Mit Vue.js und seiner inkrementellen Anpassbarkeit können Sie Vue ausprobieren, ohne Ihre vorhandene Codebasis zu gefährden.

In diesem Artikel erfahren Sie, wie Sie mit ButterCMS eine serverlose Vue.js-Anwendung erstellen. ButterCMS ist eine kopflose CMS- und Blogging-Plattform, mit der Sie CMS-gestützte Apps in jeder Programmiersprache erstellen können. In diesem Tutorial erfahren Sie, wie Sie Ihrer Vue.js-Anwendung leistungsfähige Inhalts-APIs hinzufügen. Diese APIs sind auch für nicht-technische Mitglieder Ihres Teams leicht zu navigieren und ermöglichen Ihnen ein agiles Content-Management, ohne dass Sie Ihre eigene CMS-Infrastruktur hochfahren und warten müssen.

Im Einzelnen werden drei Anwendungsfälle behandelt: Marketing-Seiten, Blogging und Wissensdatenbanken mit Codebeispielen. Der fertige Code für dieses Tutorial ist auf GitHub verfügbar.

Anfangen

Installieren Sie zuerst das ButterCMS JS SDK. Wir werden dies verwenden, um die Inhalts-API abzufragen.

npm installiere buttercms - speichere

Nach der Installation können Sie anhand der folgenden Tutorials drei Arten von Inhalten erstellen: Marketing-Seiten, Blogging und Wissensdatenbanken (z. B. eine FAQ).

Hinzufügen von Marketing-Seiten

Angenommen, Sie möchten einer nicht-technischen Person in Ihrem Team das Hinzufügen von Kundenfallstudienseiten zu Ihrer Marketing-Website ermöglichen. Zu diesem Zweck erstellen wir als Beispiel eine Fallstudienseite. Mithilfe des Dashboards in ButterCMS können Sie einen Seitentyp mit dem Titel "Kundenfallstudie" erstellen und die Felder definieren.

Anschließend können Sie Ihre erste Seite erstellen. Geben Sie den Namen und die URL der Seite im Butter-Dashboard an und füllen Sie den Inhalt der Seite aus. Anschließend gibt die ButterCMS-API Ihre definierte Seite im JSON-Format zurück. Es sollte ungefähr so ​​aussehen:

{
 "Daten": {
   "Schnecke": "acme-co",
   "Felder": {
     "Facebook_open_graph_title": "Acme Co liebt ButterCMS",
     "Seo_title": "Acme Co Customer Case Study",
     “Headline”: “Acme Co hat mit ButterCMS 200% der Ambosskosten gespart”,
     "Testimonial": "

Wir konnten Ambosse schneller als je zuvor herstellen! - Chefambossmacher \ r \ n

\ ",      "Customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",     }   } }

Öffnen Sie als Nächstes Ihren Code-Editor und erstellen Sie eine Datei mit dem Namen buttercms.js in Ihrem Verzeichnis / src.

Wenn Sie noch kein Projekt haben, erstellen Sie eines, indem Sie Folgendes eingeben:

vue init webpack buttercms-project
cd buttercms-projekt
npm ich
npm ich -s buttercms
npm run dev

Dann in src / buttercms.js:

Butter aus „Buttercms“ einführen;
const butter = Butter (‘your_api_token’);

Aktualisieren Sie jetzt die Routen in Ihrer App. Greifen Sie auf router / index.js und zu

Vue aus 'vue' importieren
Importiere Router von "vue-router"
Importieren Sie CustomersHome aus "@ / components / CustomersHome".
Importieren Sie CustomerPage aus "@ / components / CustomerPage".
Vue.use (Router)
Standard neuen Router exportieren ({
  Modus: "Geschichte",
  Routen: [
      {
        Pfad: „/ customers /“,
        Name: „Kunden zu Hause“,
        Komponente: CustomersHome
      },
      {
        Pfad: "/ customers /: slug",
        Name: "Kundenseite",
        Komponente: CustomerPage
      }
    ]
  })

Um nun eine "Kunden" -Seite einzurichten, auf der alle Ihre Kunden aufgelistet sind, definieren wir eine getpages () -Methode, mit der alle Kundenseiten abgerufen werden. In der Datei components / CustomersHome.vue fügen wir Folgendes hinzu: