项目简介
Vben Admin 是基于 Vue 3、Vite 和 Ant Design Vue 构建的高效开源后台管理系统解决方案。其设计目标是为企业级应用提供开箱即用的中后台前端框架,注重开发体验与性能优化。
技术栈
- 前端框架: Vue 3(Composition API)
- 构建工具: Vite 4
- UI 组件库: Ant Design Vue 3.x
- 状态管理: Pinia
- 路由: Vue Router 4
- HTTP 客户端: Axios
核心特性
现代化开发体验
支持 TypeScript 和 JavaScript 双模式,提供完整的类型推断。集成 Vite 的快速热更新,显著提升开发效率。
权限与路由控制
动态路由与角色权限管理模块可通过后端接口配置,实现灵活的权限控制方案。
预设模板与组件
内置多种页面模板(如列表、表单、详情页等)和业务组件(图表、富文本编辑器等),减少重复代码编写。
主题与样式定制
提供深色/浅色主题切换,支持通过 Less 变量快速自定义全局样式,满足品牌化需求。
国际化支持
默认集成多语言切换功能,涵盖中英文等常见语言配置,便于拓展其他语言。
应用场景
- 企业级后台管理系统
- SaaS 平台管理端
- 数据可视化仪表盘
- 快速原型开发
学习资源
- 官方文档:GitHub 仓库
- 在线演示:Demo 地址
https://www.vben.pro/#/auth/login - 官网:https://doc.vben.pro/
- 组件:https://ant.design/components/table-cn#table-demo-drag-column-sorting
- vxe-table插件文档:https://vxetable.cn/#/demo/list
快速开始
bash
# 克隆项目
git clone https://github.com/vbenjs/vue-vben-admin.git
# 安装依赖
pnpm install
# 启动开发环境
pnpm dev
开发环境准备
- 1.环境安装(使用nvm) https://blog.csdn.net/sjp991012/article/details/134426007
- 2.安装node的版本使用v20.15.0
- 3.安装vsCode或者webStorm