spa starter kit

Das Single Page Application Starter Kit von Codecast

Ein äußerst eigenwilliges Starterkit für Einzelseitenanwendungen, das auf Vue.js und Laravel aufbaut.

Dieses Paket enthält zwei separate Projekte, die als Ausgangspunkt für eine Single Page Application dienen: ein Vue.js-Projekt (erstellt mit vue-cli + Webpack-Vorlage) und ein Laravel 5.3-Projekt.

Es handelt sich nicht nur um frisch erstellte Projekte, sondern um eine voll funktionsfähige Anwendung, die geändert und erweitert werden kann, um Ihre eigene Anwendung zu werden.

Demo

Die Live-Demo finden Sie unter https://spa.codecasts.rocks/.

Merkmale

1. Kundenseite
   • Vue.js 2.0-Projekt mit vue-cli + Webpack-Vorlage erstellen
   • Zentralisierte Staatsverwaltung mit Vuex
   • Routenverwaltung mit Vue-Router
   • Authentifizierung mit JWT
   • Halten Sie den Benutzer mit lokal gespeicherten Informationen angemeldet
   • HTTP-Anfragen mit Axios
   • ESLint mit AirBNB-Voreinstellung
   • Paginierung integriert in Laravel's LengthAwarePaginator
   • Von SweetAlert bereitgestellte Warnungen und Bestätigungswarnungen
2. Serverseitig
   • Laravel 5.3
   • Authentifizierung mit JWT
   • Fraktal
   • Webservice RESTful mit Dingo (geplant)

Voraussetzungen

Stellen Sie sicher, dass Sie Node und Yarn (neueste Versionen) sowie PHP 7 und MySQL installiert haben.

Installation

Klonen

Mit diesen Befehlen wird das Repository heruntergeladen und für Sie vorbereitet.

 git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

Aufstellen

1. Clientseite – Dies ist ein Vue.js-Projekt, das mit vue-cli erstellt wurde
   • Mit Terminal cd client && yarn && yarn run dev .
2. Serverseitig – dies ist ein Laravel 5.3-Projekt
   • Mit Terminal:
     • Navigieren Sie zum Webservice -Ordner und dann:
     • composer install um Laravel- und Drittanbieterpakete zu installieren
     • touch database/database.sqlite um eine leere Datenbankdatei zu erstellen
     • cp .env.example .env um die Installation zu konfigurieren
     • php artisan key:generate um einen eindeutigen Schlüssel für das Projekt zu generieren
     • php artisan jwt:secret um einen eindeutigen Schlüssel für das Projekt zu generieren
     • php artisan migrate um alle Tabellen zu erstellen
     • php artisan db:seed um die Tabellen mit gefälschten Daten zu füllen
     • php artisan serve dazu, die Anwendung auf localhost:8000 bereitzustellen

Verwendung

1. Kundenseite
   • Ihre Bewerbung wird unter http://localhost:8080 verfügbar sein
2. Serverseitig
   • Der API-Endpunkt ist http:// localhost:8000/api

Testen

Navigieren Sie zum Webservice- Ordner und führen Sie das Composer-Testskript aus

$ composer test 

Erwähnenswerte Dinge

1. Die Fehlerbehandlung erfolgt global durch den Einsatz der Interceptoren von Axios. Sie können jedoch weiterhin .catch()-Fehler innerhalb von Komponenten ausführen, um Aktionen im Zusammenhang mit diesem Bereich auszuführen. Siehe /client/src/plugins/http.js;

2. Ebenso befinden sich Fehlermeldungen in einer einzigen Komponente (/client/src/modules/general/alerts.vue) und ihre Sichtbarkeit wird durch eine Vuex-Eigenschaft gesteuert. Um Nachrichten ein-/auszublenden, muss lediglich eine Vuex-Aktion aus einer beliebigen Komponente heraus ausgelöst werden.

3. Der bei Serveranfragen angezeigte Spinner (siehe oben rechts neben der Benutzeridentifizierung) wird ebenfalls von einer Vuex-Eigenschaft gesteuert. Das Verfahren zum Ein-/Ausblenden ist das gleiche wie in Punkt 2 oben beschrieben;

4. Routen und Vuex-Module befinden sich in der Nähe der Module, für die sie arbeiten. Suchen Sie immer nach „routes.js“ und „store.js“ in einem Modulverzeichnis. Siehe /client/src/modules/categories;

5. Wichtig : Das im Verzeichnis „Webservice“ gefundene Laravel-Projekt wurde über das Hinzufügen von Routen und Controllern hinaus geändert. Beispiel: Die Datei „webservice/app/Exceptions/Handler.php“ wurde gegenüber der ursprünglichen Version geändert, um alle Ausnahmen an den Client zurückzugeben, nicht nur HttpExceptions. Darüber hinaus gibt es weitere Änderungen. Wir empfehlen daher, dieses Projekt immer zum Erstellen eines eigenen Projekts zu verwenden, anstatt Controller und Routen in ein neues Projekt zu kopieren.

Mitwirken

1. Gabel es!
2. Erstellen Sie Ihren Feature-Zweig aus „develop“ : git checkout -b feature/my-new-feature
3. Schreiben Sie Ihren Code. Kommentieren Sie Ihren Code.
4. Übernehmen Sie Ihre Änderungen: git commit -am 'Add some feature'
5. Zum Zweig pushen: git push origin feature/my-new-feature
6. Senden Sie eine Pull-Anfrage, um den Zweig zu entwickeln :D

Credits

Fábio Vedovelli und engagierte Mitwirkende.

Lizenz

Lizenziert unter der MIT-Lizenz.