laravel vue spa skeleton

我目前正在研究一個新的Laravel Vue 3項目，並擔任Composition API，Vite和Pinia擔任商店經理。

這是一個大型模塊化水療中心的地下室，它利用Laravel，Vue，Elementui。

Crud Generator集成在項目中，創建了前端和後端的獨立模塊。

該項目的主要目標是：

• 避免模​​塊之間的硬凝聚力
• 構成編寫乾淨代碼的基礎
• 容易擴展
• 避免代碼重複
• 為了減少項目的開始時間
• 減少項目支持和代碼導航的時間
• 對於缺乏經驗的程序員來說是可以理解的

擴展

• 後端：Laravel 8
• 前端：VUE + VUEROUTER + VUEX + VUEI18N
• 使用JWT和Vue-Auth，Axios和Sanctum登錄。
• API路由是每個模塊的單獨的，在模塊/{modulename}/routes_api.php中
• ElementUI UI套件
• Lodash JS公用事業
• 時刻的操縱
• 通用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 - 用於熱重加載
• 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手工藝品遷移。

每個模塊都動態加載。

影片