一个现代化开箱即用的中后台解决方案,采用最新的技术栈,包括 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等前沿技术,代码规范严谨,提供丰富的配置选项,旨在为中大型项目的开发提供现成的开箱即用解决方案及丰富的示例,同时,它也是学习和深入前端技术的一个极佳示例。
介绍
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。
特点
- 最新技术栈:使用
Vue3
、Vite
、TypeScript
等前端前沿技术开发。 - 国际化:内置完善的国际化方案,支持多语言切换。
- 权限验证:完善的权限验证方案,按钮级别权限控制。
- 多主题:内置多种主题配置&黑暗模式,满足个性化需求。
- 动态菜单:支持动态菜单,可以根据权限配置显示菜单。
- Mock 数据:基于 Nitro 的本地高性能 Mock 数据方案。
- 组件丰富:提供了丰富的组件,可以满足大部分的业务需求。
- 规范:代码规范,使用
ESLint
、Prettier
、Stylelint
、Publint
、CSpell
等工具保证代码质量。 - 工程化:使用
Pnpm Monorepo
、TurboRepo
、Changeset
等工具,提高开发效率。 - 多UI库支持:支持
Ant Design Vue
、Element Plus
、Vuetify
等主流 UI 库,不再限制于特定框架。
前置准备
环境要求
在启动项目前,你需要确保你的环境满足以下要求:
验证你的环境是否满足以上要求,你可以通过以下命令查看版本:
# 出现相应 node LTS版本即可
node -v
# 出现相应 git 版本即可
git -v
获取源码
# clone 代码
git clone https://github.com/vbenjs/vue-vben-admin.git
注意
注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格,否则安装依赖后启动会出错。
安装依赖
在你的代码目录内打开终端,并执行以下命令:
# 进入项目目录
cd vue-vben-admin
# 使用项目指定的pnpm版本进行依赖安装
corepack enable
# 安装依赖
pnpm install
注意
项目只支持使用
pnpm
进行依赖安装,默认会使用corepack
来安装指定版本的pnpm
。:
运行项目
执行以下命令即可运行项目:
# 启动项目
pnpm dev
现在,你可以在浏览器访问 http://localhost:5555
查看项目。
浏览器支持
本地开发推荐使用Chrome 最新版
浏览器,不支持Chrome 80
以下版本。
生产环境支持现代浏览器,不支持 IE。
IE | Edge | Firefox | Chrome | Safari |
---|---|---|---|---|
not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |