V3 Admin Vite 5.0 焕新发行 🌈

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 版本主要做到了如下特性：

1. 配置更少
2. 结构更合理
3. 性能更优秀

配置更少

• 根目录下配置文件减少 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 目录变得非常简洁：

• common
• http
• layouts
• pages
• pinia
• plugins
• router

减少的比例超过 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 开源仓库：

• 前往 GitHub 仓库 🔜 点击这里
• 前往 Gitee 仓库 🔜 点击这里

结尾

感谢阅读到这里的朋友，期望 V3 Admin Vite 能带给你一些帮助！