pany V3 Admin Vite 是从 2021 年开源至今的一款精心制作的后台管理系统模板，5.0 版本在进行了大半年的开发后，于 2025 年 6 月 23 日正式和大家见面啦！
回顾
本次 5.0 版本的迭代与开源至今的成绩：
- 经历了本次时长 7 个月的迭代，V3 Admin Vite 也是在开源社区度过了第 4 个年头
- 本次 5.0 版本的 Commits 210+
- 期间不同程度参与的贡献者共计 6 位，开源至今贡献者累计 30+
核心内容
在保持和 4.x 功能一致的情况下，5.0 版本主要做到了如下特性：
- 配置更少
- 结构更合理
- 性能更优秀
配置更少
- 根目录下配置文件减少 4 个
- package 配置行减少 40%
- 收拢业务型配置代码 11 份
结构更合理
我将尝试用 Vue 的选项式 API 与组合式 API 来解释 V3 Admin Vite 5.0 版本中带给大家的新结构。
选项式目录
在 4.x 的版本中，项目目录的组织方式就像是 Vue2 中的选项式 API，我们在 src 目录下用多个代表不同功能的子目录来描述项目的结构，这样的功能目录有 15 个，并且根据需求还可以更多：
- api
- assets
- components
- config
- constants
- directives
- hooks
- icons
- layouts
- plugins
- router
- store
- styles
- utils
- views
这样子的选项式目录是以功能划分的概念为核心，对初学者非常友好。
同时它的缺点也比较明显：处理同一个业务逻辑的代码和资源被拆分在了不同的目录中，位于项目的不同部分。在一个大项目中，要读懂一个业务逻辑，需要在不同目录中反复跳跃，这在很多时候并不理想。
组合式目录
为了解决这个问题，我在 5.0 的版本中更新了项目目录的组织方式，就像是 Vue3 中的组合式 API。这种新结构首先可以让我们 src 目录变得非常简洁：
减少的比例超过 50%，但这只是开始。
我们展开业务开发最常用的 pages 目录可以看到：
├─ src
│ ├─ pages # 页面
│ │ └─ login # 登录模块
│ │ ├─ apis # 登录模块 - 私有接口
│ │ ├─ components # 登录模块 - 私有组件
│ │ ├─ composables # 登录模块 - 私有组合式函数
│ │ ├─ images # 登录模块 - 私有图片
│ │ └─ index.vue # 登录模块 - 页面
在 4.x 中被扁平化在 src 目录下的 apis、components 等子目录被放进每一个业务页面中。
现在处理同一个业务逻辑的代码和资源被收拢到了一起，我们无需再为了一个业务经常在不同的目录间来回跳跃，能有效降低维护成本。在此基础上，我们可以很轻松地将这一整个业务模块移动到一个外部项目中，迁移成本也得到非常大的改善。
当然，一个项目中始终存在着一些属于全局的代码和资源，所以 V3 Admin Vite 预留了 common 目录：
├─ src
│ ├─ common # 通用目录
│ │ ├─ apis # 通用目录 - 接口
│ │ ├─ assets # 通用目录 - 静态资源
│ │ ├─ components # 通用目录 - 组件
│ │ ├─ composables # 通用目录 - 组合式函数
│ │ ├─ constants # 通用目录 - 常量
│ │ └─ utils # 通用目录 - 工具函数
并且贴心的内置了 @@ 别名指向该目录，在 4.x 中访问扁平化的 components 目录是这样的：src/components 或 @/components，在 5.0 中访问全局的组件是这样的：src/common/components 或 @@/components
语义化目录
除了目录新结构的变更，5.0 在目录命名上也是下了一番功夫。
我挑一个有趣的介绍，更多内容欢迎大家在使用模板的过程中自行体验~
在 4.x 中状态管理器的目录是这样的：
├─ src
│ ├─ store # 状态管理
│ │ ├─ modules # 状态管理 - 多个 module
│ │ └─ index.ts # 状态管理 - 入口
在 5.0 中状态管理器的目录是这样的：
├─ src
│ ├─ pinia # 状态管理
│ │ ├─ stores # 状态管理 - 多个 store
│ │ └─ index.ts # 状态管理 - 入口
因为受到 Vuex 时期的影响，我们习惯性采用单一 store 和 多个 module 的目录方式。但在 Pinia 中，需要的是扁平化的多个 store。
参考：pinia.vuejs.org/zh/cookbook…
性能更优秀
5.0 相对于 4.x 最后一个发行版 4.5.6 来说：
- 打包构建产物总体积减少 33.3%
- 打包构建总时长降低 5.3%
更新的语法和配置
包括但不限于：
- 采用 Vue 3.5 引入的 useTemplateRef - Using Vue 3.5's new useTemplateRef
- 采用 Vue 3.5 引入的 onWatcherCleanup - Using Vue 3.5's new onWatcherCleanup
- 采用 Vue 3.5 引入的 Reactive Props Destructure - Using Vue 3.5's new "Reactive Props Destructure"
- 开启 Vite 5.1 引入的 preprocessorMaxWorkers - Run CSS preprocessors in threads
- 采用 Vue Router 4 路由守卫新语法 - 移除路由守卫中的 next 参数
开始使用
5.0 版本中文文档已完成，5.0 版本零基础手摸手教程正在努力更新中 💪🏻
要获取项目的最新消息和更多内容，请直接关注 GitHub 开源仓库：
结尾
感谢阅读到这里的朋友，期望 V3 Admin Vite 能带给你一些帮助！
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)