×

一个基于 Laravel 框架的 Vue3 管理后台 vue3-laravel-admin

独孤求败 独孤求败 发表于2026-10-22 09:19:09 浏览14 评论0

抢沙发发表评论

今天给大伙儿推荐一个开源项目 —— 一个基于 Laravel 框架的 Vue3 管理后台 vue3-laravel-admin。vue3-laravel-admin 是一个可部署即用、也能交给 AI 定制的开源管理后台,后端基于 Laravel,前 想深入了解的同学,建议收藏这篇。

项目地址:
https://github.com/DarkWinoom/vue3-laravel-admin

01

PART


项目是什么

项目是什么

vue3-laravel-admin 是一个可部署即用、也能交给 AI 定制的开源管理后台,后端基于 Laravel,前端基于 Vue3 与 Soybean Admin。

它已经内置了登录、用户与角色管理、菜单权限、个人中心、操作审计、统计仪表盘和接口文档等常见后台能力,界面支持中文、明暗主题和手机访问,省去从零搭建的重复劳动。

你可以先把它跑起来体验,也可以安装配套的 AI Skill,让编程助手以本项目为地基,继续扩展出属于自己的管理系统。

02

PART


项目结构

STRUCTURE · 目录布局

下面用一张目录树,帮你快速摸清这个项目的代码组织方式:

...项目目录

├── .agents/

│   └── skills/

│       └── vue3-laravel-admin/

├── backend/

│   ├── app/

│   │   ├── Http/

│   │   ├── Models/

│   │   ├── Modules/

│   │   ├── Providers/

│   │   └── Shared/

│   ├── bootstrap/

│   │   ├── app.php

│   │   └── providers.php

│   ├── config/

│   │   ├── app.php

│   │   ├── auth.php

│   │   ├── cache.php

│   │   ├── cors.php

│   │   ├── database.php

│   │   ├── documentation.php

│   │   ├── event-sourcing.php

│   │   ├── filesystems.php

│   │   ├── identity.php

│   │   ├── jwt.php

│   │   ├── logging.php

│   │   ├── mail.php

│   │   ├── queue.php

│   │   ├── services.php

│   │   └── session.php

│   ├── database/

│   │   ├── factories/

│   │   ├── migrations/

│   │   ├── seeders/

│   │   └── .gitignore

│   ├── public/

│   │   ├── .htaccess

│   │   ├── favicon.ico

│   │   ├── index.php

│   │   └── robots.txt

│   ├── routes/

│   │   ├── api.php

│   │   ├── console.php

│   │   └── web.php

│   ├── tests/

│   │   ├── Feature/

│   │   ├── Fixtures/

│   │   ├── Unit/

│   │   └── TestCase.php

│   ├── .editorconfig

│   ├── .env.example

│   ├── .gitattributes

│   ├── .gitignore

│   ├── artisan

│   ├── composer.json

│   ├── composer.lock

│   ├── openapi.json

│   ├── phpstan.neon

│   └── … (1+ 项)

├── docker/

│   ├── api.Dockerfile

│   ├── nginx.conf

│   ├── start-api.sh

│   └── web.Dockerfile

├── frontend/

│   ├── e2e/

│   │   └── admin.spec.ts

│   ├── packages/

│   │   ├── alova/

│   │   ├── axios/

│   │   ├── color/

│   │   ├── hooks/

│   │   ├── materials/

│   │   ├── scripts/

│   │   ├── uno-preset/

│   │   └── utils/

│   ├── public/

│   │   ├── favicon.svg

│   │   └── logo.png

│   ├── src/

│   │   ├── assets/

│   │   ├── components/

│   │   ├── constants/

│   │   ├── desktop/

│   │   ├── enum/

│   │   ├── hooks/

│   │   ├── layouts/

│   │   ├── locales/

│   │   ├── plugins/

│   │   ├── router/

│   │   ├── service/

│   │   ├── store/

│   │   ├── styles/

│   │   ├── theme/

│   │   ├── typings/

│   │   ├── utils/

│   ├── src-tauri/

│   ├── tests/

│   ├── .editorconfig

│   ├── .env.example

│   ├── .gitattributes

│   ├── .gitignore

│   ├── .npmrc

│   ├── .oxfmtrc.json

│   ├── .oxlintrc.json

│   ├── eslint.config.js

│   ├── index.html

│   ├── LICENSE

├── scripts/

├── .dockerignore

├── .env.development.example

├── .env.example

├── .env.production.example

├── .env.testing.example

├── .gitattributes

├── .gitignore

├── .prettierignore

├── .prettierrc.json

├── compose.yaml

├── desktop.json

03

PART


核心功能

核心功能

•内置 登录 与 用户 / 角色管理,开箱即可分配账号权限

•菜单权限 控制,按角色配置可见菜单与操作范围

•个人中心,供登录用户维护自身信息

•操作审计,记录后台关键行为便于追溯

•统计仪表盘,直观呈现业务数据

•接口文档,方便前后端对接与维护

•界面支持 中文、明暗主题与手机访问

•AI 定制:配套 Skill 引导 AI 复用现有界面,自动补齐菜单、权限、数据接口与检查

•Docker Compose 一键部署,启动即用

•跨平台 桌面客户端,支持 Windows / macOS / Linux

•前端界面基于 Soybean Admin,保留上游许可证与资源来源

04

PART


技术栈

TECH STACK · 技术选型

类别
技术
后端框架
`Laravel`(PHP)
前端框架
`Vue3` + `Soybean Admin`
运行环境
`Node.js 22.19+`、Git
部署方式
`Docker` / `Docker Compose`
桌面端
Windows / macOS / Linux 安装包
AI 扩展
配套 Agent Skill 开发指引

05

PART


快速开始

QUICK START · 快速上手

准备 Git、Node.js 22.19+ 和 Docker Compose,启动 Docker 后执行:

...sh

git clone https://github.com/DarkWinoom/vue3-laravel-admin.git my-admin

cd my-admin

node scripts/docker.mjs up

首次构建会下载依赖,完成后打开 http://localhost:8080 即可登录。创建自己的管理员:

...sh

docker compose --env-file .env.testing exec api php artisan admin:create admin@example.com

部署到服务器或更换端口时,先执行 node scripts/setup.mjs,在 .env.testing 中把 APP_URL 改为浏览器实际访问地址;访问地址须与配置一致,否则登录会被来源校验拒绝。

06

PART


适用场景

适用场景

适合想快速拥有一个完整后台、又不想重复造轮子的团队和个人:先用默认后台管理用户、权限与业务数据,再通过 AI Skill 在其上扩展商品管理、客户管理等专属模块。

它也适合想练习「AI 驱动开发」的开发者——把仓库作为地基交给编程助手,让 AI 同步维护界面、菜单、权限与接口,体验低代码式的后台搭建;定制完成后还能以自己的 GitHub 仓库发布独立桌面应用。


群贤毕至

访客