前言

做企业中后台开发的前端小伙伴大多踩过这些坑：

重复写列表、表单、弹窗 CRUD 模板，表单校验、下拉联动、数据回填每次重复编码；换项目就要重新搭建路由、权限、全局请求拦截；想要暗色 / 主题切换、国际化还要从零封装。

今天给大家分享一款MIT 完全开源、无捆绑广告、无自定义私有包的 Vue3 中后台前端框架：czleing-admin（Gitee 开源，暂无线上体验地址）

基于 Vue3 + Vite + Pinia + Ant-design-vue4 + JavaScript + axios + vue-router + pnpm 技术栈，主打配置化 CRUD 可视化开发 + 一键生成前后端代码，

开发极简(前端实现一个部门管理只需几十行代码)，内置全部示例，训练AI极简单，AI生成或人工编写都方便，拿来即用，大幅减少重复业务代码编写，新手也能快速上手开发后台系统。 项目开源地址：https://gitee.com/czleing/base-backend-static

一、框架技术栈一览（全主流稳定技术，无冷门依赖）

前端

技术	版本 & 作用说明
Vue3	Composition API，setup 语法糖，现代 Vue 开发规范
Vite	构建工具，极速热更新、打包速度远超 webpack
Pinia	状态管理，替代 Vuex，内置持久化插件pinia-plugin-persist
Ant Design Vue	4.x 官方最新 UI 组件库，企业级成熟组件生态
VueUse	集成常用组合式工具函数，免重复封装通用 hooks
Axios	统一接口请求封装，全局异常拦截、请求体统一规范
Dayjs	日期处理，替代笨重 moment，antdv 官方标配日期库
unplugin-auto-import	ref/reactive 等 API 自动导入，无需手动 import
pnpm	包管理器，安装依赖更快、磁盘占用更低

后端

Spring-boot

Mybatis Plus

MySQL

Redis

* 框架自带 sql 数据库初始化脚本，第三方依赖简单，环境搭建门槛低

亮点：原生 JavaScript 版本，非 TS，对不熟悉 TS 的前端开发非常友好，降低接入门槛。

二、框架核心亮点（区别于市面臃肿 admin 模板）

✅ 1、框架功能及特点

• 主题色动态切换
• 全局明/暗色模式
• 统一动态调整组件大小
• 使用动态路由及权限配置
• 统一接口异常拦截及处理
• 统一路由拦截及校验
• 多种菜单布局方式
• 支持标签栏展示多个页面
• 支持多级路由缓存及刷新
• 使用 JavaScript
• 支持国际化(vue-i18n)
• 线上自动检测版本更新
• CRUD 配置化开发
• 内置系统管理基础功能
• 集成SSE消息通知
• Swagger 接口文档(入口：打开菜单：开发中心 -> 接口文档)
• CRUD 可视化代码生成
• 一个CRUD页面只有一个文件，不用到处跳，开发不割裂，代码简短，如：一个部门管理只需几十行代码，一个用户管理也仅200多行，菜单管理300多行

✅ 2、配置化 CRUD，告别 90% 重复页面编码

框架自研CPage万能 CRUD 组件，只需要写配置 JSON，自动生成查询区、列表表格、新增 / 编辑 / 详情弹窗，不用手写大量表单 DOM、表格标签、弹窗逻辑。 传统开发：几十行模板 + 上百行 JS 写列表、表单、校验、回填； 本框架写法：仅配置filterConfig（查询）、tableConfig（表格）、modalConfig（弹窗表单）三段配置即可完成完整 CRUD 页面。 最简示例代码：

<template>
  <CPage :filter-config="filterConfig" :table-config="tableConfig" :modal-config="modalConfig"/>
</template>
<script setup>
import CPage from '@/components/crud/c-page.vue'
const filterConfig = {fields: [{label:'名称',fieldName:'name'}]}
const tableConfig = {columns:[{title:'名称',dataIndex:'name'}]}
const modalConfig = {formConfig:{fields:[{label:'名称',fieldName:'name',required:true}]}}
</script>

同时内置表单联动、动态下拉远程请求、字段显隐 / 禁用动态控制、自定义校验规则，所有配置支持函数动态取值，轻松实现复杂业务表单需求。

✅ 3、可视化代码生成器（王牌功能）

内置「菜单：开发中心 - 代码生成」模块：

1. 数据库建好数据表；
2. 后台页面导入数据表，可视化编辑字段属性（新增 / 查询 / 列表展示、控件类型）；
3. 选择生成包路径、模块名、上级菜单，一键生成前端 Vue 页面 + 后端 Java 全量代码，自动生成菜单及按钮权限，导入后端即可直接使用 CRUD 页面。

适合快速开发CRUD等基础业务表，新项目搭建效率提升 70% 以上。

✅4、全场景系统能力内置，开箱即用不用二次封装

1. 主题系统：全局主题色动态切换、亮色 / 暗黑模式一键切换、组件大小自定义、布局切换（左侧 / 顶部 / 混合菜单布局），主题使用 CSS 变量 + ThemeToken 双方案，主题切换实时生效，基础样式库原生适配主题变化；
2. RBAC 权限控制：v-hasPermi 自定义指令实现按钮级权限管控，动态路由根据角色菜单权限自动渲染，内置用户 / 角色 / 菜单 / 部门 / 岗位五大系统管理模块；
3. 字典全链路集成：表单下拉、表格列自动绑定字典编码，全局<DictView>组件解析字典文本，字典数据全局缓存，避免重复请求接口；
4. 国际化：原生集成 vue-i18n，一键中英文切换，页面标签、弹窗、表单字段统一多语言；
5. 全局工具封装：统一 axios 请求拦截（全 POST 请求体传参规范）、全局消息弹窗、CModal 通用弹窗组件（modal/drawer 二合一）、登录用户信息全局获取、在线版本检测更新；
6. 常用组件内置：文件上传、图片上传、树形选择、日期范围、富文本、动态表格、表单、弹窗、自定义插槽等高频业务控件。

✅5、项目规范整洁，无冗余垃圾代码

1. 目录分层清晰，组件、hooks、api、enum 分层管理，统一代码书写规范（双空格缩进、scoped 局部样式）；
2. 无作者私有 npm 包、无内嵌广告弹窗、无冗余无用页面，纯净轻量化，按需删减模块；
3. 前后端统一接口规范：全接口默认 POST+body 传参，统一返回结构，前后端对接成本极低。

三、适用场景

1. 企业内部 OA、ERP、后台管理系统快速搭建；
2. SaaS 产品管理端、数据运维后台；
3. 个人练手学习 Vue3+Antdv4 中后台开发；
4. 外包项目快速落地 CRUD 业务。

四、为什么推荐 Star 本项目？

1. MIT 开源永久免费商用，无任何版权限制，项目持续迭代更新，后续会持续迭代新功能、修复已知问题，Star 可以第一时间收到项目更新提醒；
2. 日常开发遇到中后台需求可以直接拉取项目二次改造，节省大量重复造轮子时间，收藏 Star 方便后续随时查阅下载；
3. 如果你在使用过程中遇到 bug 或需要新功能，可在 Gitee 提交 Issue，作者及时回复优化；有优化思路也欢迎提交 PR 共建项目；
4. 开源不易，你的Star 是对开源作者持续维护最大的鼓励，顺手点个⭐，后续更新不迷路。

五、写在最后

目前市面上很多 Vue3 Admin 框架要么动不动上微前端及重度 TS 上手难、要么封装太深太分散难以阅读，要么臃肿冗余、要么捆绑自研收费组件，要么核心代码封装在私有包等等，本项目主打精简 + 实用 + 配置化低代码，通俗接地气，能轻松查看实现逻辑及自己扩展二开，贴合国内企业中后台真实开发场景。 项目地址再放一遍：

czleing-admin

👉 https://gitee.com/czleing/base-backend-static

感兴趣的小伙伴可以 Clone 本地运行体验，试用觉得好用欢迎 Star+Fork，一起交流中后台开发踩坑经验！