laravel vue spa skeleton

В настоящее время я работаю над новым проектом Laravel Vue 3 с Composition Api, Vite и Pinia в качестве менеджера магазина.

Это основа для большого модульного SPA, использующего Laravel, Vue, ElementUI.

Генератор CRUD интегрирован в проект и создает автономные модули во внешнем и внутреннем интерфейсе.

Основными целями проекта являются:

• чтобы избежать жесткой связи между модулями
• сформировать основу для написания чистого кода
• чтобы было легко расширить
• чтобы избежать дублирования кода
• сократить время запуска проекта
• сократить время поддержки проекта и навигации по коду
• быть понятным неопытному программисту

Расширения

• Бэкенд: Laravel 8
• Интерфейс: Vue + VueRouter + Vuex + VueI18n
• Войдите, используя JWT с Vue-Auth, Axios и Sanctum.
• Маршруты API индивидуальны для каждого модуля в Modules/{ModuleName}/routes_api.php.
• Комплект пользовательского интерфейса ElementUI
• Утилиты Lodash js
• Манипулирование моментом и временем
• FontAwesome 5 иконок

Установить

• git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
• cd laravel-vue-spa-skeleton
• composer install
• cp .env.example .env — скопировать файл .env
• установите свои учетные данные БД в .env
• php artisan key:generate
• php artisan migrate
• yarn install

Тестирование

Модульное тестирование

php artisan test

Использование

• npm run watch или npm run hot — для горячей перезагрузки
• php artisan serve и идет 127.0.0.1:8000
• Создайте нового пользователя и войдите.

Создание модуля

Вы можете легко создать модуль с функциональностью CRUD.

php artisan make:module {ModuleName}

Это создаст:

• база данных миграции database/migrations/000_00_00_000000_create_{ModuleName}_table.php

• модель app/Models/{ModuleName}.php

• заводская database/factories/{ModuleName}Factory.php

• тестыtests tests/Feature/{ModuleName}Test.php

• серверный модуль app/Modules/{ModuleName}/

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

• ресурсы внешнего модуля 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

После создания модуля вы можете редактировать модель и миграцию, добавляя необходимые поля. Также вы можете добавить эти поля в поле зрения. Не забудьте запустить миграцию php artisan.

Каждый модуль загружается динамически.

Видео