Stellen Sie eine Vue.js E-Commerce-App in 3 Schritten bereit

In diesem Blog werde ich die Bereitstellung von a demonstrieren E-Commerce-Website anzeigen in 3 Schritten. Diese Website ist eine einfache E-Commerce-App, die mit Nuxt und Cosmic JS erstellt wurde. Stripe ist als Zahlungsabwickler integriert. Das auf Flexbox basierende Bulma-Framework wird zusammen mit Buefy-Komponenten für das Styling verwendet. Die App wurde von erstellt Mohammed Altaf für die Cosmic JS Community und wurde auf Vue.js, Nuxt.js, Node.js und Cosmic JS aufgebaut.

Installieren und verwalten Sie Ihre E-Commerce-Website anzeigen und alle Inhalte aus Ihrem Cosmic JS Bucket Dashboard. Einfach. 😎 Sie können sich auf das Original-Tutorial unten beziehen, um die App von Grund auf neu zu erstellen, oder weiterlesen, um die Vue E-Commerce-Website einfach in 3 Schritten bereitzustellen.

TL;DR:
E-Commerce-Website anzeigen
Vue E-Commerce-Website-Demo
Codebasis der Vue E-Commerce-Website
So erstellen Sie eine E-Commerce-Website mit Nuxt und Cosmic JS

Wir werden Cosmic JS verwenden, um unsere Beispiel-App zu installieren, bereitzustellen und in Zukunft Inhaltsaktualisierungen vorzunehmen. Cosmic JS ist eine API-First-Content-Management-Plattform, die es Entwicklern ermöglicht, Apps in jeder Programmiersprache zu erstellen, während Content-Editoren einen vertrauten Content-Editor zur Verfügung stellen, um dynamische Inhalte aus der Cloud zu verwalten. Wenn Sie es noch nicht getan haben, beginnen Sie mit der Registrierung für Cosmic JS.

Erstellen Sie einen neuen Bucket

0*UInjgs6LdjZDodVg.png

Der Name Ihres Buckets ist der Name Ihrer Website, Ihres Projekts, Clients oder Ihrer Webanwendung, die Sie erstellen.

Installieren Sie die Vue E-Commerce-Website

0*j7ampWya5hyu9KpJ.png

Cosmic JS gibt Ihnen die Möglichkeit, zwischen Frameworks und Programmiersprachen wie Node.js, Vue.js, React, AngularJS und mehr zu filtern.

Im Web bereitstellen

Navigieren Sie zu „Deploy Web App“ unter Einstellungen in Ihrer linken Navigationsleiste in Ihrem Bucket-Dashboard. Ich habe auf „Im Web bereitstellen“ geklickt. Ich kann dann Objekte bearbeiten, während meine Webanwendung bereitgestellt wird. Sie erhalten eine E-Mail, die die Bereitstellung Ihrer Webanwendung bestätigt. Wenn Sie während der Bereitstellung auf Probleme stoßen, werden Sie möglicherweise zur Cosmic JS-Fehlerbehebungsseite weitergeleitet.

Bestätigen Sie den Bereitstellungsstandort und die Filiale

0*jtUhX6QZWrgQvN-v.png

Verzweigungsbestätigungsmodal bereitstellen

0*_GDTVOz9It5tVSdW.png

Ich verwende die Content-Ready-App von Muhammad Althaf in der Cosmic JS Community, also verwende ich seinen Master Repo.

Nachdem Ihre App nun auf dem Cosmic JS App Server bereitgestellt wurde, können Sie Ihre Vue E-Commerce-Website und alle ihre Inhalte vollständig von einem Ort aus verwalten.

Cosmic JS ist eine API-first Cloud-basierte Content-Management-Plattform, die es einfach macht, Anwendungen und Inhalte zu verwalten. Wenn Sie Fragen zur Cosmic JS API haben, wenden Sie sich bitte an die Gründer unter Twitter oder Locker.

Similar Posts

Leave a Reply

Your email address will not be published.