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
• ชุด UI ของ 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
• ตั้งค่าข้อมูลประจำตัว DB ของคุณใน .env
• php artisan key:generate
• php artisan migrate
• yarn install

การทดสอบ

การทดสอบหน่วย

php artisan test

การใช้งาน

• npm run watch หรือ npm run hot - สำหรับการโหลดซ้ำแบบ 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 โยกย้าย

ทุกโมดูลโหลดแบบไดนามิก

วีดีโอ