laravel vue spa skeleton

Je travaille actuellement sur un nouveau projet Laravel Vue 3 avec Composition Api, Vite et Pinia comme responsable de magasin.

Il s'agit d'un sous-sol pour un grand SPA modulaire, qui utilise Laravel, Vue, ElementUI.

Le générateur CRUD est intégré au projet et crée des modules autonomes sur le frontend et le backend.

Les principaux objectifs du projet sont :

• pour éviter une cohésion dure entre les modules
• pour former la base de l'écriture de code propre
• être facile à développer
• pour éviter la duplication de code
• pour réduire l'heure de démarrage du projet
• pour réduire le temps de support projet et de navigation dans le code
• être compréhensible pour un programmeur inexpérimenté

Rallonges

• BackEnd : Laravel 8
• FrontEnd : Vue + VueRouter + Vuex + VueI18n
• Connectez-vous en utilisant JWT avec Vue-Auth, Axios et Sanctum.
• Les routes API sont distinctes pour chaque module, dans Modules/{ModuleName}/routes_api.php
• Kit d'interface utilisateur ElementUI
• Utilitaires Lodash js
• Manipulations du temps et du moment
• Icônes FontAwesome 5

Installer

• git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
• cd laravel-vue-spa-skeleton
• composer install
• cp .env.example .env - copier le fichier .env
• définissez vos informations d'identification DB dans .env
• php artisan key:generate
• php artisan migrate
• yarn install

Essai

Tests unitaires

php artisan test

Usage

• npm run watch ou npm run hot - pour le rechargement à chaud
• php artisan serve et c'est parti 127.0.0.1:8000
• Créez un nouvel utilisateur et connectez-vous.

Création d'un module

Vous pouvez facilement créer un module avec la fonctionnalité CRUD.

php artisan make:module {ModuleName}

Cela créera :

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

• application de modèle app/Models/{ModuleName}.php

• base de données d'usine database/factories/{ModuleName}Factory.php

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

• application du module back-end app/Modules/{ModuleName}/

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

• ressources du module frontend 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

Après avoir créé le module, vous pouvez modifier le modèle et la migration en ajoutant les champs dont vous avez besoin. Vous pouvez également ajouter ces champs à la vue. N'oubliez pas d'exécuter php artisan migrate.

Chaque module se charge dynamiquement.

Vidéo