免费开源高颜值管理后台UI框架——Vue vben admin

Vue Vben Admin是基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的后台解决方案，为中大型项目开发提供开箱即用的UI框架，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。

免费开源说明：

Vue Vben Admin的作者是一位国内的开发者，他在业余的时间开源了这个 admin 框架，并以 MIT 开源协议托管在 Github 上，任何人都可以免费下载使用，不限制商用。

Vue vben admin 的技术特性：

1、Vue 全家桶。基于Vue3, Vite, Vue Router Next, Vuex Next 开发
2、Typescript。使用Typescript开发
3、Hooks。封装hooks，满足日常开发需求
4、权限管理。完善的前后端权限管理方案
5、组件封装。对日常使用频率较高的组件二次封装，组件很丰富
6、按需引入。真正的按需引入，只在需要的页面引入

Vue vben admin 的目录结构：

├── build # 构建相关脚本
├── mock # 模拟数据
├── public # 静态资源
├── src # 项目代码
│   ├── api #请求相关
│   ├── assets # 静态资源
│   ├── components # 组件
│   ├── design  # 样式
│   ├── enums # 常量，枚举
│   ├── hooks # hooks
│   ├── logics # 逻辑相关
│   ├── layouts # 布局
│   ├── main.ts # 入口文件
│   ├── router #路由，菜单等
│   ├── locale #多语言文件
│   ├── settings # 配置文件
│   ├── plugins # 插件
│   ├── store # vuex
│   ├── utils # 工具类
│   └── views # 页面
└── types # 类型定义

Vue vben admin工具配置：

如果您使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

Iconify IntelliSense - Iconify 图标插件
windicss IntelliSense - windicss 提示插件
I18n-ally - i18n 插件
Vetur - vue 开发必备 （也可以选择 Volar）
ESLint - 脚本代码检查
Prettier - 代码格式化
Stylelint - css 格式化
DotENV - .env 文件 高亮

Vue vben admin 轻松上手：

从 GitHub 获取代码

# clone 代码
git clone https://github.com/vbenjs/vue-vben-admin.git

从 Gitee 获取代码

git clone https://gitee.com/annsion/vue-vben-admin.git

进入Vue vben admin官网