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 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中设置您的数据库凭据
• 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 migrate。

每个模块都是动态加载的。

视频