laravel vue spa skeleton

Saat ini saya sedang mengerjakan proyek Laravel Vue 3 baru dengan Composition Api, Vite dan Pinia sebagai manajer toko.

Ini adalah ruang bawah tanah untuk SPA modular besar, yang menggunakan Laravel, Vue, ElementUI.

Generator CRUD terintegrasi dalam proyek menciptakan modul mandiri di frontend dan backend.

Tujuan utama dari proyek ini adalah:

• untuk menghindari kohesi yang keras antar modul
• untuk menjadi dasar penulisan kode yang bersih
• agar mudah untuk diperluas
• untuk menghindari duplikasi kode
• untuk mengurangi waktu mulai proyek
• untuk mengurangi waktu dukungan proyek dan navigasi kode
• agar dapat dimengerti oleh programmer yang tidak berpengalaman

Ekstensi

• Bagian Belakang: Laravel 8
• Ujung Depan: Vue + VueRouter + Vuex + VueI18n
• Masuk menggunakan JWT dengan Vue-Auth, Axios dan Sanctum.
• Rute api, terpisah untuk setiap modul, di Modules/{ModuleName}/routes_api.php
• Kit UI ElemenUI
• Utilitas Lodash js
• Manipulasi momen waktu
• FontAwesome 5 ikon

Memasang

• git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
• cd laravel-vue-spa-skeleton
• composer install
• cp .env.example .env - salin file .env
• atur kredensial DB Anda di .env
• php artisan key:generate
• php artisan migrate
• yarn install

Pengujian

Pengujian Satuan

php artisan test

Penggunaan

• npm run watch atau npm run hot - untuk memuat ulang saat panas
• php artisan serve dan pergi 127.0.0.1:8000
• Buat pengguna baru dan login.

Membuat modul

Anda dapat dengan mudah membuat modul dengan fungsionalitas CRUD.

php artisan make:module {ModuleName}

Ini akan membuat:

• database migrasi database/migrations/000_00_00_000000_create_{ModuleName}_table.php

• aplikasi model app/Models/{ModuleName}.php

• database pabrik database/factories/{ModuleName}Factory.php

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

• aplikasi modul backend app/Modules/{ModuleName}/

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

• sumber daya modul frontend 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

Setelah membuat modul, Anda dapat mengedit model dan migrasi dengan menambahkan kolom yang Anda perlukan. Anda juga dapat menambahkan bidang ini ke dalam tampilan. Jangan lupa jalankan php artisan migrasi.

Setiap modul dimuat secara dinamis.

Video