大家好,我是张大鹏,10 年全栈开发经验。上篇文章聊了我为什么选择 Vue-Pure-Admin 作为二次开发基础,后台有朋友问:"那精简版和完整版到底有什么区别?我该用哪个?" 今天这篇文章专门聊聊这个问题。
一、先说一个让我惊讶的数据
在写这篇文章之前,我做了一个统计。
完整版 vue-pure-admin 的 src/views 目录下,有 208 个 Vue 文件。
精简版 pure-admin-thin 的 src/views 目录下,有 8 个 Vue 文件。
208 vs 8。
差了整整 26 倍。
当然,完整版的页面多是因为它包含了大量的演示示例------各种表单变体、表格变体、图表变体、组件展示......目的是让你看到这个框架"能做什么"。但如果你直接拿它来做项目,第一件事就是删掉那些你用不上的示例页面。
而精简版,已经把这件事帮你做了。
二、Pure-Admin-Thin 到底是什么?
它的官方介绍很简单:
精简版是基于 vue-pure-admin 提炼出的架子,包含主体功能,更适合实际项目开发。
说人话就是:完整版是"样板间",精简版是"毛坯房"。
完整版把所有的装修方案、家具搭配都展示给你看,让你知道有哪些可能性。精简版把这些展示性的东西都拆掉了,只留下最核心的结构------水电、墙面、地面都做好了,怎么装修你自己定。
基本档案
| 项目 | 信息 |
|---|---|
| 仓库 | github.com/pure-admin/pure-admin-thin |
| 版本 | v6.2.0 |
| 许可证 | MIT |
| 依赖 | Element-Plus + Pinia + Vue-Router + Tailwind CSS v4 + Echarts 等 |
| 版本选择 | 非国际化版(默认) / 国际化版(i18n 分支) |
| 打包大小 | < 2.3MB(全局引入 Element-Plus),< 350KB(Brotli + CDN) |
技术栈
它和完整版的技术栈完全一致:
| 技术 | 用途 |
|---|---|
| Vue 3 + Composition API | 前端框架 |
| Vite 7 | 构建工具 |
| Element-Plus | UI 组件库 |
| TypeScript | 严格模式类型检查 |
| Pinia | 状态管理 |
| Vue Router 4 | 路由管理 |
| Tailwind CSS v4 | 原子化 CSS |
| Echarts | 数据可视化 |
三、完整版 vs 精简版:逐项对比
3.1 目录结构
先说个有意思的发现:两个版本的顶层目录结构完全一样。
src/
├── api/ # API 接口
├── assets/ # 静态资源
├── components/ # 公共组件
├── config/ # 配置
├── directives/ # 自定义指令
├── layout/ # 布局组件
├── plugins/ # 插件
├── router/ # 路由配置
├── store/ # Pinia 状态
├── style/ # 样式
├── utils/ # 工具函数
└── views/ # 页面
这意味着什么?意味着你可以把精简版当完整版的"子集"来理解。你在完整版里学到的路由怎么写、状态怎么管、组件怎么封装,在精简版里全部适用。
唯一的区别在 views/ 目录------这是两个版本差异最大的地方。
3.2 核心差异对比
| 对比维度 | vue-pure-admin(完整版) | pure-admin-thin(精简版) |
|---|---|---|
| 定位 | 技术演示 + 学习参考 | 实际项目开发 |
| Vue 页面数 | 208 个 | 8 个 |
| 打包体积 | 较大(含大量示例) | < 2.3MB(全局 Element-Plus) |
| 极限优化后 | --- | < 350KB(Brotli + CDN) |
| 路由配置 | 大量演示路由 | 基础路由框架 |
| Mock 数据 | 完整版演示 Mock | 基础 Mock 框架 |
| 国际化 | 完整版多语言示例 | 可选(i18n 分支) |
| Issues & PR | ✅ 接受 | ❌ 不接受 |
| 代码同步 | 主仓库 | 永久同步完整版核心更新 |
3.3 精简版去掉了什么?
完整版的 208 个页面中,精简版只保留了 8 个。去掉的 200 个页面包括:
| 类别 | 说明 |
|---|---|
| 表单示例 | 各种表单布局、校验、动态表单等演示 |
| 表格示例 | 多功能表格、拖拽表格、树形表格等 |
| 图表示例 | Echarts 的各种图表配置演示 |
| 组件展示 | 按钮、输入框、弹窗、消息提示等 Element-Plus 组件演示 |
| 功能页面 | 编辑器、Markdown、图片裁剪、头像上传等 |
| 错误页面 | 403/404/500 的多种风格(精简版保留了基本版) |
| 额外布局 | 多种布局变体的演示 |
| AI 聊天 | v6.0 新增的 AI 对话组件示例 |
这些对于"学习"来说很有价值,但对于"做项目"来说------你大概率不会直接拿来用,而是会按自己的需求重新实现。
四、我们的选择:定版过程
回到我们自己的选型,把这个过程说清楚。
第一轮:选生态
先确定用哪个 UI 组件库,这决定了我们能在哪个框架池里选。
我们选了 Element-Plus。原因很简单:在国内做后台管理系统,Element-Plus 的社区规模、文档完善度、第三方组件生态都是最好的。这就把候选范围缩小到了基于 Element-Plus 的框架。
第二轮:选框架
确定了 UI 库之后,基于 Element-Plus 的 Vue 3 框架其实没几个值得认真考虑的。
最终我们选了 Vue-Pure-Admin,上篇文章已经详细说过原因了------代码质量高、可定制性强、轻量、MIT 协议。
第三轮:选版本
到这一步,才面临完整版 vs 精简版的问题。
我们的结论是:两个都要。
| 用途 | 选哪个 | 原因 |
|---|---|---|
| 日常开发、写业务代码 | 精简版 | 干净、轻量、没有干扰 |
| 学习参考、查功能 | 完整版 | 208 个页面,什么场景都有示例 |
| 二次开发基础 | 精简版 | 从干净的架子出发,按需添加 |
实际落地就是:本地 packages/ 下两个都放。
packages/pure-admin-thin/是主力开发目录packages/vue-pure-admin/是参考目录,遇到不确定的功能就去翻翻完整版是怎么实现的
五、为什么精简版更适合做二开基础?
5.1 干净的起点
208 个页面里有大量你不需要的代码。如果直接在完整版上做二次开发,你首先要花时间搞清楚哪些是"框架本身的功能",哪些是"演示示例"。这种心智负担是完全没有必要的。
精简版只有 8 个页面,核心功能一目了然。路由、权限、布局、状态管理------这些框架核心都在,但没有任何多余的干扰。
5.2 体积优势
精简版 < 350KB 的极限体积意味着你在叠加业务代码后有更大的空间。
我做了一个粗略估算:
| 场景 | 完整版 + 业务代码 | 精简版 + 业务代码 |
|---|---|---|
| 框架基础 | 2MB+ | 350KB |
| 业务代码(50 个页面) | ~500KB | ~500KB |
| 总计 | 2.5MB+ | ~850KB |
850KB 和 2.5MB,首屏加载速度的差距是肉眼可见的。
5.3 永远同步核心更新
官方明确说了:精简版会永久同步完整版的代码。
这意味着你不用纠结"用精简版会不会落后于完整版"。核心的功能更新、Bug 修复、安全补丁都会同步到精简版。你只需要关注自己的业务代码就行。
5.4 两个版本的选择性
很多人忽略了一点:精简版提供了一个国际化分支。
| 分支 | 用途 |
|---|---|
main |
非国际化版本,更轻量 |
i18n |
集成国际化,适合多语言项目 |
如果你做的项目不需要国际化,用 main 分支可以省掉 i18n 相关的代码体积和维护成本。如果未来需要了,切到 i18n 分支或者参考完整版的实现加上去都行。
六、一点选型心得
做技术选型,我这些年最大的体会是:
不要高估"功能多"的价值,不要低估"代码干净"的价值。
一个功能多到炸裂但代码耦合严重的框架,前期看起来什么都能做,后期改起来处处是坑。一个功能克制但代码清爽的框架,前期可能要多写几行代码,但后期改起来心情舒畅。
Vue-Pure-Admin 的精简版,在我看过的所有后台管理框架中,是在"功能完整性"和"代码简洁性"之间平衡得最好的一个。
下一篇文章我打算深入分析它的权限系统------这也是后台管理系统最核心的模块之一。如果你感兴趣,欢迎关注。
| 核心结论 | 说明 |
|---|---|
| 完整版(208 页面) | 适合学习参考、功能演示 |
| 精简版(8 页面) | 适合实际项目开发、二次开发基础 |
| 我们的方案 | 两个都保留:精简版主力开发,完整版参考查询 |
| 极限体积 | 精简版 Brotli + CDN 后可低于 350KB |
| 同步保障 | 精简版永久同步完整版核心更新 |
参考资料:
我是张大鹏,10 年全栈开发经验,大鹏 AI 教育团队。关注我,每周分享后台管理系统开发实战经验。