推荐一款基于ThinkPHP8和Vue3的后台管理系统——BuildAdmin

BuildAdmin是一款成熟的后台管理系统，后端服务采用ThinkPHP8技术，数据库使用Mysql。前端部分则利用了当前最流行的Vue3 / TypeScript / Vite / Element Plus / Pinia等前端技术栈，旨在满足中小企业快速迭代 web 端业务的需求，是一款商业级后台管理系统。

BuildAdmin免费开源和商用说明

BuildAdmin 是一个开源项目，遵循 Apache 2.0 协议，完全免费。在项目主页上，你可以找到明确的说明：无需授权即可用于商业用途。TP8、Mysql 和前端框架等所有技术都是开源的，你可以放心地将其用于商业应用。

BuildAdmin技术亮点

​🚀 CRUD代码生成

在早先阶段，BuildAdmin 便提供了通过命令直接生成数据表的增删改查代码功能。现在，这个功能得到了进一步增强，用户可以通过图形化界面轻松地生成后台代码。除此之外，它还支持表格查询、各种表单组件、拖拽排序、权限控制的编辑和删除操作，以及关联表等功能。这些功能不仅实用，而且极大地提高了开发效率，为您节省了大量的开发时间。

💥 内置WEB终端

我们内置了WEB终端以实现一些理想中的功能，比如：虽然是基于vue3的系统，但你在安装本系统时，并不需要手动执行npm install和npm build命令。且后续本终端将为您提供更多方便、快捷的服务。

👍 流行且稳定的技术栈

除了基于TP8前后端分离架构外，我们的Vue3使用了Setup、状态管理使用了Pinia、并使用了TypeScript、Vite、Element plus等可以为你的知识面添砖加瓦的技术栈。

🎨 所见不只是所得

后台模块市场还可一键安装数据导出、短信发送、云存储、单页或是纯前端技术栈的学习案例项目等等，随时随地为系统添砖加瓦，系统能够自动维护package.json和composer.json并通过内置终端自动完成模块所需依赖的安装，若您愿意成为模块开发者，模块可以：覆盖系统任何文件或为系统新增文件，您的模块经由官方审核即可上架。

🔀 前后端分离

web文件夹内包含：干净(不含后端代码)、完整(所有前端代码文件均在此内) 的前端代码文件，对前端开发者友好，作为纯前端开发者，您可以将BAdmin当做学习与资源的社群，本系统可为您准备好案例和模板等所需要的环境，而您只需专注于学习或工作，不需要会任何后端代码！

🚚 按需加载

前端的页面组件和语言包均是在使用到它们时，才从网络异步加载，服务端则是基于TP8和PSR规范天生拥有真正的按需加载能力，所以，您无需考虑我并不需要多语言、我并不需要某个后台功能这类的问题，不需要不使用或隐藏即可。

✨ 高颜值

提供三种布局模式，其中默认布局使用无边框设计风格，它并没有强行填满屏幕的每一个缝然后使用边框线进行分隔，所有的功能版块，都像是悬浮在屏幕上的，同时又将屏幕空间及其合理的利用了.

🔐 权限验证

可视化的权限管理，然后根据权限动态的注册路由、菜单、页面、按钮(权限节点)、支持无限父子级权限分组、前后端搭配鉴权，自由分派页面和按钮权限。

BuildAdmin本地安装使用

下载项目代码或者 git clone 到本地后，在本地拥有 PHP 开发环境的前提下，打开终端执行下面代码即可安装：

# 其中 buildadmin 为项目根目录，该目录包含一个没有前后缀的 think 文件
cd buildadmin

# git克隆的代码需要执行这条命令，完整包不需要，若找不到命令，可以尝试:composer.phar install
composer install

等待执行完毕后，在浏览器访问：http://127.0.0.1:8000/ 就可以打开项目，首次进入根据引导完成整个系统的安装，接下来就可以进行开发。

BuildAdmin目录结构

Server 端

使用 Thinkphp8 多应用推荐目录结构
├─app（应用目录）
│  ├─admin
│  ├─api
│  └─common
│
├─config（配置目录）
│
├─database（数据库迁移文件-Phinx）
│
├─extend（扩展目录）
│
├─install（安装器源代码，此目录不一定存在）
│
├─public（运行目录）
│  ├─npm-install-test（npm install测试项目）
│  ├─static
│  │  ├─fonts（一些字体）
│  │  │
│  │  └─images（一些图片）
│  │
│  └─storage（上传的文件保存在这里）
│
├─runtime（运行时目录，缓存、日志等）
│
├─web（WEB端源代码，见下文详叙）
│  .env-example（env配置示例）
│  .gitattributes
│  .gitignore
│  .travis.yml
│  CHANGELOG.md（更新日志）
│  composer.json
│  README.md
└─ think（命令行入口文件）

web 端

使用经典目录结构设计，并合理优化
├─public（公共文件）
├─src
│  │  App.vue
│  │  main.ts
│  │
│  ├─api（所有接口相关）
│  │  │  common.ts（公共Url定义和公共请求方法）
│  │  │
│  │  ├─backend（后台接口方法定义）
│  │  │
│  │  └─frontend（前台接口方法定义）
│  │
│  ├─assets（静态资源）
│  │
│  ├─components（组件）
│  │  ├─baInput（输入组件封装：常用+图片/文件上传、数组、城市/图标选择、富文本等封装在了一个组件内）
│  │  │
│  │  ├─contextmenu（tabs右击菜单）
│  │  │
│  │  ├─formItem（表单项，结合baInput）
│  │  │
│  │  ├─icon（字体图标组件，支持加载本地svg、阿里、element、awesome）
│  │  │
│  │  ├─table（表格封装）
│  │  │
│  │  ├─mixins（可供模块混入代码到系统的埋点，如云存储，编辑器）
│  │  │
│  │  ├─clickCaptcha 点选文字验证码
│  │  │
│  │  └─terminal（终端）
│  │
│  ├─lang（所有语言包）
│  │  │  autoload.ts（语言包按需加载映射表，比如路由 /user/user 需要同时加载 /user/group 的语言包可在此定义）
│  │  │  globs-en.ts（全局英文语言包）
│  │  │  globs-zh-cn.ts（全局中文语言包）
│  │  ├─common（公共页面语言包：`t('dirName.pageName.翻译名')`进行调用）
│  │  ├─backend（后台页面语言包：`t('dirName.pageName.翻译名')`进行调用）
│  │  │  zh-cn.ts（后台公共中文语言包）
│  │  │  en.ts（后台公共英文语言包）
│  │  ├─frontend（前台页面语言包：`t('dirName.pageName.翻译名')`进行调用）
│  │  │  zh-cn.ts（前台公共中文语言包）
│  │  └─ en.ts（前台公共英文语言包）
│  │
│  ├─layouts（布局）
│  │  ├─backend（后台布局）
│  │  │  components （布局组件）
│  │  │  container （布局容器组件，内含默认的三种布局方案）
│  │  │  index.vue （后台布局入口）
│  │  ├─frontend（前台布局）
│  │  │  components （布局组件）
│  │  │  container （布局容器组件，内含默认的布局方案）
│  │  │  user.vue （会员中心布局入口）
│  │  └─common（公共布局组件）
│  │
│  ├─router（路由）
│  │      static.ts（静态路由配置）
│  │
│  ├─stores（状态商店）
│  │  ├─adminInfo.ts（管理员资料）
│  │  ├─config.ts（布局相关）
│  │  ├─memberCenter.ts（会员中心）
│  │  ├─navTabs.ts（后台顶栏tab）
│  │  ├─siteConfig.ts（站点配置）
│  │  ├─terminal.ts（终端）
│  │  ├─userInfo.ts（用户资料）
│  │  │
│  │  ├─constant（常量定义）
│  │  │      cacheKey.ts（缓存Key）
│  │  │
│  │  └─interface（接口定义）
│  │          index.ts
│  │
│  ├─styles（样式表）
│  │      app.scss
│  │      index.scss（css入口文件，main.ts只导入它就可以了）
│  │      element.scss（element的css覆盖）
│  │      loading.scss
│  │      var.scss（css变量定义）
│  │      dark.scss（暗黑模式下css变量定义）
│  │      mixins.scss（scss mixins与function定义）
│  │
│  ├─utils（工具库）
│  │      axios.ts（网络请求封装）
│  │      baTable.ts（表格封装）
│  │      build.ts（构建时）
│  │      common.ts（公共方法）
│  │      directives.ts（指令）
│  │      horizontalScroll.ts（横向滚动工具）
│  │      iconfont.ts（图标）
│  │      layout.ts（布局辅助）
│  │      loading.ts（页面加载）
│  │      pageBubble.ts（页面气泡效果）
│  │      pageShade.ts（全局阴影）
│  │      random.ts（随机数、字符串生成）
│  │      router.ts（路由辅助）
│  │      storage.ts（local缓存、session缓存封装）
│  │      useCurrentInstance.ts（快速获取当前实例）
|  |      useDark.ts （暗黑模式相关工具函数）
│  │      validate.ts（一些表单验证方法）
│  │      vite.ts（vite运行与编译时）
│  │
│  └─views（视图）
│      ├─backend（后台视图）
│      ├─common（公共视图）
│      └─frontend（前台视图）
│
├─types
│  .editorconfig（IDE风格统一配置）
│  .env（基础环境变量定义）
│  .env.development（开发环境变量定义）
│  .env.production（生产环境变量定义）
│  .eslintignore（eslint忽略）
│  .eslintrc.js（eslint配置）
│  .prettierrc.js（prettier配置）
│  index.html（入口文件）
│  package.json
│  README.md
│  tsconfig.json（ts配置）
└─ vite.config.ts（vite配置）

进入BuildAdmin官网