laravel vue spa skeleton

Actualmente estoy trabajando en un nuevo proyecto de Laravel Vue 3 con Composition Api, Vite y Pinia como gerente de tienda.

Este es un sótano para un gran SPA modular, que utiliza Laravel, Vue, ElementUI.

El generador CRUD está integrado en el proyecto y crea módulos independientes en el frontend y el backend.

Los principales objetivos del proyecto son:

• para evitar la dura cohesión entre módulos
• para formar la base para escribir código limpio
• ser fácil de expandir
• para evitar la duplicación de código
• para reducir el tiempo de inicio del proyecto
• para reducir el tiempo de soporte del proyecto y navegación del código
• ser comprensible para un programador inexperto

Extensiones

• Parte trasera: Laravel 8
• Interfaz: Vue + VueRouter + Vuex + VueI18n
• Inicie sesión usando JWT con Vue-Auth, Axios y Sanctum.
• Las rutas de la API están separadas para cada módulo, en Modules/{ModuleName}/routes_api.php
• Kit de interfaz de usuario ElementUI
• Utilidades de Lodash js
• Manipulaciones del tiempo momento.
• FontAwesome 5 iconos

Instalar

• git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
• cd laravel-vue-spa-skeleton
• composer install
• cp .env.example .env - copiar el archivo .env
• configure sus credenciales de base de datos en .env
• php artisan key:generate
• php artisan migrate
• yarn install

Pruebas

Pruebas unitarias

php artisan test

Uso

• npm run watch o npm run hot - para recarga en caliente
• php artisan serve y listo 127.0.0.1:8000
• Cree un nuevo usuario e inicie sesión.

Creando módulo

Puede crear fácilmente un módulo con funcionalidad CRUD.

php artisan make:module {ModuleName}

Esto creará:

• base de datos de migración database/migrations/000_00_00_000000_create_{ModuleName}_table.php

• aplicación de modelo app/Models/{ModuleName}.php

• base de datos de fábrica database/factories/{ModuleName}Factory.php

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

• aplicación del módulo backend app/Modules/{ModuleName}/

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

• recursos del módulo de interfaz 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

Después de crear el módulo, puede editar el modelo y la migración agregando los campos que necesite. También puede agregar estos campos a la vista. No olvides ejecutar php artisan migrar.

Cada módulo se carga dinámicamente.

Video