laravel vue spa skeleton

Atualmente, estou trabalhando em um novo projeto Laravel Vue 3 com API de composição, Vite e Pinia como gerente de loja.

Este é um porão para um grande spa modular, que utiliza Laravel, Vue, ElementUi.

O gerador CRUD é integrado no Project cria módulos independentes no front -end e no back -end.

Os principais objetivos do projeto são:

• Para evitar coesão dura entre os módulos
• Para formar a base para escrever código limpo
• Para ser fácil de expandir
• Para evitar a duplicação de código
• Para reduzir a hora de início do projeto
• Para reduzir o tempo de suporte do projeto e a navegação de código
• ser compreensível para um programador inexperiente

Extensões

• Back -end: Laravel 8
• Frontend: vue + vuerouter + vuex + vuei18n
• Faça login usando JWT com Vue-Auth, Axios e Sanctum.
• As rotas da API são separadas para cada módulo, em módulos/{ModuleName} /Routes_api.php
• Kit elementUi ui
• Utilitários JS de Lodash
• Manipulações de momento
• Fontawesome 5 ícones

Instalar

• git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
• cd laravel-vue-spa-skeleton
• composer install
• cp .env.example .env - copy .env arquivo
• Defina suas credenciais de banco de dados em .env
• php artisan key:generate
• php artisan migrate
• yarn install

Teste

Teste de unidade

php artisan test

Uso

• npm run watch ou npm run hot - para recarregamento a quente
• php artisan serve e Go 127.0.0.1:8000
• Crie novo usuário e login.

Criando módulo

Você pode criar facilmente o módulo com funcionalidade CRUD.

php artisan make:module {ModuleName}

Isso criará:

• Banco de Dados de Migração database/migrations/000_00_00_000000_create_{ModuleName}_table.php

• Modelo app/Models/{ModuleName}.php

• Banco de dados de fábrica database/factories/{ModuleName}Factory.php

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

• módulo de back -end app/Modules/{ModuleName}/

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

• Recursos do módulo de front -end 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

Depois de criar o módulo, você pode editar o modelo e a migração adicionando campos necessários. Além disso, você pode adicionar esses campos à vista. Não se esqueça do Run Php Artisan migrar.

Cada módulo carrega dinamicamente.

Vídeo