Vue Vben Admin：拿 32K Star 的 Vue3 后台模板

Vue Vben Admin：拿 32K Star 的 Vue3 后台模板

vue-vben-admin 在 GitHub 上已经有 32.8K Star 了。

一个开源的中后台前端模板，基于 Vue 3、Vite、TypeScript，开箱即用，可以拿来做业务，也可以拿来当学习参考。5.0 是当前最新大版本，跟旧版本不兼容，新项目建议直接上 5.0，老项目可以切到 v2 分支。

1、 这玩意儿是干嘛的

给中后台管理系统提供一套完整的前端脚手架。登录、权限、菜单、国际化、主题、组件库这些中后台该有的东西，它都打包好了。clone 下来装好依赖跑起来，就能看到一个能登录能跳转的后台雏形。

技术栈选型偏前沿。Vue 3 的 Composition API、Vite 的构建速度、TypeScript 的类型约束，都是当下主流配置。想用 Vue 2 那一套的，得自己降级处理。

2、 它解决了什么问题

写中后台最烦的不是业务逻辑，是重复劳动。每个项目都要从零搭路由、配权限、写表单校验、调菜单、做主题切换、加国际化。这些活一遍遍写下来，业务还没开始，脚手架已经磨掉两周。

vue-vben-admin 把这些基础设施全做完了。动态路由权限生成是内置方案，菜单跟着路由走，主题色可以热换，多语言包覆盖比较全。开发者要做的就是把业务模块往里塞，而不是再写一遍登录页和权限拦截。

3、 主要特性

技术栈跟着 Vue 3 和 Vite 走，构建速度比 Webpack 时代快不少。TypeScript 是一等公民，类型定义覆盖比较完整，配合 IDE 的提示能少踩很多坑。

主题这块支持多套配色，可以切换也可以自定义。国际化开箱即用，多语言资源已经打好包。权限部分采用动态路由方案，按钮级和路由级都能做。这些特性拼在一起，省掉了大量样板代码。

浏览器只支持现代版本，Edge、Firefox、Chrome、Safari 各自最近两个版本，IE 不在支持范围。Tailwind CSS v4.0 要求 Safari 16.4+、Chrome 111+、Firefox 128+，旧浏览器用户得自己升级。

4、 安装使用

拉代码：

gitclone https://github.com/vbenjs/vue-vben-admin.gitcdvue-vben-adminnpmi-gcorepackpnpminstallpnpmdev

构建生产包用pnpm build。本地开发用pnpm dev起开发服务器，热更新跟着 Vite 走，改完代码基本是秒级生效。

包管理器用的是 pnpm，配合 corepack 锁版本，避免不同机器装出不一致的依赖树。

5、 在线预览

提供了在线预览站点，不用本地 clone 也能看效果。账号 vben，密码 123456，可以直接登录进去翻各个模块，看页面布局和交互细节。这比 clone 下来再跑一遍更适合前期评估，先看顺不顺眼再决定要不要花时间。

6、 适合哪些人用

需要快速搭一个中后台管理系统的团队，不想自己从零写脚手架。Vue 3 技术栈的学习者，想看一个完整的工程化案例怎么组织代码。要做权限系统的开发者，参考它的动态路由方案能少走弯路。

5.0 是一次大版本升级，跟之前不兼容，已经在用旧版本的项目要谨慎升级，新项目直接上 5.0 即可。

。

5.0 是一次大版本升级，跟之前不兼容，已经在用旧版本的项目要谨慎升级，新项目直接上 5.0 即可。