Vue Vben Admin – 支持中文界面现代化的 vue 后台管理系统

一个现代化开箱即用的中后台解决方案,采用最新的技术栈,包括 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等前沿技术,代码规范严谨,提供丰富的配置选项,旨在为中大型项目的开发提供现成的开箱即用解决方案及丰富的示例,同时,它也是学习和深入前端技术的一个极佳示例。

file

介绍

Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。

特点

  • 最新技术栈:使用 Vue3ViteTypeScript 等前端前沿技术开发。
  • 国际化:内置完善的国际化方案,支持多语言切换。
  • 权限验证:完善的权限验证方案,按钮级别权限控制。
  • 多主题:内置多种主题配置&黑暗模式,满足个性化需求。
  • 动态菜单:支持动态菜单,可以根据权限配置显示菜单。
  • Mock 数据:基于 Nitro 的本地高性能 Mock 数据方案。
  • 组件丰富:提供了丰富的组件,可以满足大部分的业务需求。
  • 规范:代码规范,使用 ESLintPrettierStylelintPublintCSpell 等工具保证代码质量。
  • 工程化:使用 Pnpm MonorepoTurboRepoChangeset 等工具,提高开发效率。
  • 多UI库支持:支持 Ant Design VueElement PlusVuetify 等主流 UI 库,不再限制于特定框架。

file

前置准备

环境要求

在启动项目前,你需要确保你的环境满足以下要求:

  • Node.js 20 及以上版本,推荐使用 fnm 或者 nvm 进行版本管理。
  • Git 任意版本。

验证你的环境是否满足以上要求,你可以通过以下命令查看版本:

# 出现相应 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 查看项目。

file

浏览器支持

本地开发推荐使用Chrome 最新版浏览器,不支持Chrome 80以下版本。

生产环境支持现代浏览器,不支持 IE。

IE Edge Firefox Chrome Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

官方链接

Comments

No comments yet. Why don’t you start the discussion?

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注