不等于长期业务开发效率的是高 Star, 大量开发者在选型时仅仅去看热度, 却忽略了 CRUD 日常开发当中真实存在的痛点, vben-admin、pure-admin 常年有着数万的 star, 另有一款 -admin 热度少得可怜, 然而日常开发体验的差距极大, 很多团队踩坑, 根源就是在选型时只看热度, 本文从工程实践的角度对三款主流后台脚手架进行横向对比。
三个框架定位简述
【vben-admin】(含 thin-next 精简版)
庞大且全面的综合脚手架, 是国内较早一批的Vue3后台模板, 属于纯前端项目, 没有内置后端, 在全网有着极其众多的教程资源。它支持多种UI库进行切换, 内里有着海量的Demo, 还支持进行线上预览。
多层进行深度封装, 抽象层面的层级十分复杂, 存在一定的学习成本, 有着依赖庞大的情况, 工程化能力方面呀, 不管是需要的和不需要的全都给增添上去了, 并且Vite冷启动的速度比较慢, 挺适合大企业里多人团队来开展开发工作, 它支持配置化, 然而配置起来较为繁琐, 其缺点是, 层级嵌套得很深, 页面文件呈现出碎片化的状态, 对于长期业务项目而言底层改造起来会很麻烦。
后端社区存在着诸多适配版本, 于此针对其进行推荐对接, 所涉及的是 vben - admin - , 并且是基于。
【pure-admin】
Plus 之上进行开发, 运用传统模板式开发构思, 有齐全的案例, 文档丰富, 封装时有克制, 自由度高大可不必介意, 呈现支持线上预览的状况。
对客观视觉的感受而言: Plus 的整体设计偏向于传统,要达成用户管理等基础的 CRUD, 就需要去编写数量众多的模板代码, 那重复的工作量惊人地大。
它适合这样的团队, 即页面数量极少的小型项目团队, 对于反复进行复制操作毫不介意, 并且特别钟情于手写原生Vue模板的团队。
后端使用 开发
【-admin】
基于Ant, 又有Vue4这一块, 路线跟别的不一样啊: 专门进行配置化的CRUD, 还有代码生成, 核心的CPage组件, 把搜索栏跟表格、工具栏聚合到一块, 再有新增、编辑、详情弹窗这三个能合并成一个, 打包好了给您用, 各个子组件嘛, 也能够单独去用, 能灵活组合, 又能够利用插槽去替换对应的区域。CRUD代码量特别少, 不用老是去复制页面模板, 代码简洁又清晰, CPage及其子组件这块实现起来浅显易懂, 二次改造扩展起来容易。
表单联动设计呈现出简洁的特点, 对于其中的静态属性, 若要将其转化为动态逻辑, 则仅需把相应的值改写成函数, 此情况区别于 vben, 在 vben 中, 动静是需要分开于不同属性进行配置的;表单内置了远程动态数据源以及字典能力, 其配置过程较为简单;表格列扩展出了多种常用功能, 具备轻量化且无冗余的 Demo, 同时还提供了全配置示例, 鉴于此适合直接拿来用于开发, 能够省去进行无用代码删减的麻烦, 再者其界面视觉以及动画都颇为精致。
进行代码生成时, 先从事数据库图表设计工作, 接下来在页面导入该表, 以生成前端和后端的代码, 并附带菜单权限。
适合:大量CRUD业务,快速交付,追求精简实用轻量化
内置的后端, 采用 Java -boot 单体服务的方式, 并且能够适配其他后端。
不足在于, 开源起始的时间不长, 其社区所具有的热度比较低, 各种各样的示例数量较少, 并且缺乏线上的预览地址。
核心能力详细对比表
对比维度
vben-admin
pure-admin
-admin
UI 组件库
多 UI 适配器(Antdv/ Plus/)
Plus
Ant Vue 4
完整 CRUD 代码量
处于中等水平, 搜索、表格、弹窗这三者相互独立, 需要自行去进行组合, 有着少量的样板代码, 能够支撑配置化开发, 鉴于不存在固定的后端, 接口对接起来较为繁琐。
很高,模板繁重,文件分散,页面代码累计上千行
超级低;借助CPage配置驱动, 完整的用户管理仅仅200来行, 前端与后端高度整合, 预设功能直接省掉接口对接, 不需要另外封装api层, CPage的各个部分子组件也能够单独运用, 自行进行组合, 也支持插槽自定制。
表单校验 & 联动
依托 Zod 进行校验, 其语法较为简洁, 不过却得额外去学习新的语法;静态配置与动态联动逻辑需要划分到两处进行定义。
原生模板书写时的校验准则, 联动逻辑使用完全手写的事件, 具备灵活性然而样板代码会出现堆积。
配置呈现一体化状态, 能够直接对antdv rules校验规则予以复用, 联动属性在本质上天然支持静态值以及函数动态取值。
文件拆分习惯
处在高度碎片化的状况下, 页面被拆分为, vue相关一组文件, api相关一批文件, hooks相关一些文件, 类型相关多篇文件。
页面进行拆分, 其位置处于 index.vue 当中,同时也在 form.vue 里, 还涉及 api 以及一大堆 utils 以内, 然而模板代码呈现出很冗长的情况。
高度进行聚合, 在绝大多数的场景之下, 仅仅对一个vue文件予以维护, 并且代码的数量较少, 目录呈现出整洁的状态。
动态数据源支持
辞典、下拉状的动态状态请求, 得靠自己去封装, 注入的流程特别繁杂, 还必须要配合着去达成动态的数据源才行。
提供基础字典组件,、异步请求逻辑需要自行补齐
表单组件, 列表内置远程异步数据源, 字典功能, 配置一至三个属性便能够实现。
内置基础模块
首先,它功能极为繁多, 其设置项可谓无所不有。其次, 它附带了数量众多的演示 Demo。再者, 其内置系统管理仅仅支持用户、角色、菜单、部门。而在实际使用的时候, 需要补齐字典、岗位、日志、定时任务以及通知等。最后, 还需要删除许多示例代码。
基础的基座是干净的, 大多是示例代码, 配套的拓展能力比较少, 缺少系统管理等基础模块。
仅留存后台业务刚需, 即系统管理基础模块以及部分使用示例, 系统管理里有内置用户, 还有角色, 有菜单, 有部门, 有字典, 有岗位, 有登录/错误日志, 有定时任务/日志, 有通知公告, 且无冗余 Demo。
自定义拓展
底层逻辑的修改, 因多层嵌套封装, 得追溯多层源码, TS存在重度嵌套情况, 扩展起来困难重重, 有诸多阻碍。
扩展自由度极大, 每一个页面自顾自, 风格想要做到统一着实困难, 全新增加的通用能力要在每一个页面反复落实。
通用逻辑收敛于CPage内部, 一旦实施修改, 所有CRUD页面均会生效, 风格始终保持统一, 特殊页面能够不运用CPage组件, 采用传统途径展开开发。
技术栈现状
Vue3.5+Vite8, 架构;重度依赖 TS
Vue3.5+Vite8+ Plus;强 TS 导向
Vue3.5 + Vite8 + ;JS 友好,不强制
开发速度
提速一般
开发速度缓慢
提速明显
适合人群
大企业多人团队开发
行业初学者
行业精英,少人团队或个人
最终选型参考
对于短期的演示性质的内容, 为了学习进行练习操作, 并且存在需要多次进行用户界面切换的情况, 进而指向了vben - admin。
页面数量极少,坚持手写 模板 → pure-admin
系统当中存在着数量众多的 CRUD 页面, 出于对长期开发效率的追求, 为了减少重复编码的情况, 在设计风格方面偏好 Antdv, 进而形成了 -admin 这种情况。
要说些题外话, 那些高 Star 的项目之中好多都是去迎合入门开发者的需求的, 而面向资深业务开发者且主打工程提效的轻量化框架, 通常是缺少曝光机会的。要是你对无休止地复制表格、搜索栏、弹窗模板感到厌倦了, 那么不妨去尝试一下 -admin。
如果还有其他好用的后台开发框架
欢迎讨论和推荐~