laravel vue spa skeleton

저는 현재 Composition Api, Vite 및 Pinia를 매장 관리자로 두고 새로운 Laravel Vue 3 프로젝트를 진행하고 있습니다.

Laravel, Vue, ElementUI를 활용하는 대규모 모듈형 SPA의 지하실입니다.

CRUD 생성기는 프로젝트에 통합되어 프런트엔드와 백엔드에 독립형 모듈을 생성합니다.

프로젝트의 주요 목표는 다음과 같습니다.

• 모듈 간의 단단한 응집력을 피하기 위해
• 깨끗한 코드를 작성하기 위한 기반을 형성하기 위해
• 확장하기 쉽도록
• 코드 중복을 피하기 위해
• 프로젝트 시작 시간을 단축하기 위해
• 프로젝트 지원 및 코드 탐색 시간을 줄이기 위해
• 경험이 없는 프로그래머도 이해할 수 있도록

확장

• 백엔드: Laravel 8
• 프런트엔드: Vue + VueRouter + Vuex + VueI18n
• Vue-Auth, Axios 및 Sanctum과 함께 JWT를 사용하여 로그인하세요.
• API 경로는 Modules/{ModuleName}/routes_api.php 에 각 모듈마다 별도로 있습니다.
• ElementUI UI 키트
• 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 에서 DB 자격 증명을 설정하십시오.
• 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/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 migration을 실행하는 것을 잊지 마세요.

모든 모듈은 동적으로 로드됩니다.

동영상