laravel vue spa skeleton

Ich arbeite derzeit an einem neuen Laravel Vue 3-Projekt mit Composition Api, Vite und Pinia als Store Manager.

Dies ist ein Keller für ein großes modulares SPA, das Laravel, Vue und ElementUI nutzt.

Der CRUD-Generator ist in das Projekt integriert und erstellt eigenständige Module im Frontend und Backend.

Die Hauptziele des Projekts sind:

• um einen harten Zusammenhalt zwischen Modulen zu vermeiden
• um die Grundlage für das Schreiben von sauberem Code zu bilden
• leicht erweiterbar sein
• um Codeduplizierung zu vermeiden
• um die Startzeit des Projekts zu verkürzen
• um die Zeit für Projektunterstützung und Codenavigation zu verkürzen
• für einen unerfahrenen Programmierer verständlich sein

Erweiterungen

• BackEnd: Laravel 8
• FrontEnd: Vue + VueRouter + Vuex + VueI18n
• Melden Sie sich mit JWT mit Vue-Auth, Axios und Sanctum an.
• Die API-Routen sind für jedes Modul separat in Modules/{ModuleName}/routes_api.php
• ElementUI UI-Kit
• Lodash js-Dienstprogramme
• Moment-Zeit-Manipulationen
• FontAwesome 5 Symbole

Installieren

• git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
• cd laravel-vue-spa-skeleton
• composer install
• cp .env.example .env – .env-Datei kopieren
• Legen Sie Ihre DB-Anmeldeinformationen in .env fest
• php artisan key:generate
• php artisan migrate
• yarn install

Testen

Unit-Tests

php artisan test

Verwendung

• npm run watch oder npm run hot – für Hot-Neuladen
• php artisan serve and Go 127.0.0.1:8000
• Neuen Benutzer erstellen und anmelden.

Modul erstellen

Sie können problemlos Module mit CRUD-Funktionalität erstellen.

php artisan make:module {ModuleName}

Dadurch wird Folgendes erstellt:

• Migrationsdatenbank database/migrations/000_00_00_000000_create_{ModuleName}_table.php

• model app/Models/{ModuleName}.php

• Fabrikdatenbank database/factories/{ModuleName}Factory.php

• Tests tests/Feature/{ModuleName}Test.php

• Backend-Modul app/Modules/{ModuleName}/

 {ModuleName}/
│
├── routes_api.php
│
├── Controllers/
│   └── {ModuleName}Controller.php
│
├── Requests/
│   └── {ModuleName}Request.php
│
└── Resources/
    └── {ModuleName}Resource.php

• Frontend-Modul resources/js/modules/{moduleName}/

 {moduleName}/
│
├── routes.js
│
├── api/
│   └── index.js
│
├── components/
│   ├── {ModuleName}List.vue
│   ├── {ModuleName}View.vue
│   └── {ModuleName}Form.vue
│
└── store/
    ├── store.js
    ├── types.js
    └── actions.js

Nachdem Sie das Modul erstellt haben, können Sie das Modell und die Migration bearbeiten, indem Sie die benötigten Felder hinzufügen. Sie können diese Felder auch zur Ansicht hinzufügen. Vergessen Sie nicht, php artisan migrate auszuführen.

Jedes Modul wird dynamisch geladen.

Video