✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

VbenAdmin Logo


Vue vben admin

English | 中文


Vue Vben Admin is a free and open source middle and back-end template. Using the latest vue3, vite2, TypeScript and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.


  • State of The Art Development:Use front-end front-end technology development such as Vue3/vite2
  • TypeScript: Application-level JavaScript language
  • Theming: Configurable themes
  • International:Built-in complete internationalization program
  • Mock Server Built-in mock data scheme
  • Authority Built-in complete dynamic routing permission generation scheme.
  • Component Multiple commonly used components are encapsulated twice


Test account: vben/123456

VbenAdmin Logo VbenAdmin Logo VbenAdmin Logo

Use Gitpod

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.

Open in Gitpod




  • node and git - Project development environment
  • Vite - Familiar with vite features
  • Vue3 - Familiar with Vue basic syntax
  • TypeScript - Familiar with the basic syntax of TypeScript
  • Es6+ - Familiar with es6 basic syntax
  • Vue-Router-Next - Familiar with the basic use of vue-router
  • Ant-Design-Vue - ui basic use
  • Mock.js - mockjs basic syntax

Install and use

  • Get the project code
git clone https://github.com/anncwb/vue-vben-admin.git
  • Installation dependencies
cd vue-vben-admin

yarn install
  • run
yarn serve
  • build
yarn build

Change Log



How to contribute

You are very welcome to join!Raise an issue Or submit a Pull Request。

Pull Request:

  1. Fork code!
  2. Create your own branch: git checkout -b feat/xxxx
  3. Submit your changes: git commit -am 'feat(function): add xxxxx'
  4. Push your branch: git push origin feat/xxxx
  5. submitpull request

Git Contribution submission specification

  • reference vue specification (Angular)

    • feat Add new features
    • fix Fix the problem/BUG
    • style The code style is related and does not affect the running result
    • perf Optimization/performance improvement
    • refactor Refactor
    • revert Undo edit
    • test Test related
    • docs Documentation/notes
    • chore Dependency update/scaffolding configuration modification etc.
    • workflow Workflow improvements
    • ci Continuous integration
    • types Type definition file changes
    • wip In development

Related warehouse

If these plugins are helpful to you, you can give a star support

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, not IE

not support last 2 versions last 2 versions last 2 versions last 2 versions




If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!


Paypal Me



MIT © Vben-2020

  • New Feature

    New Feature

    If the system does not have the function you want, you can put it here, and we will develop it according to the situation!

    Function proposal format

    Name: Add xxx function
    Role: Business scenario description
    Online reference example (if available): https://xxxx



    在线参考示例(如果有): https://xxxx
    opened by anncwb 39
  • Suggest


    If you have good suggestions or ideas, please feel free to mention them here.


    opened by anncwb 27
  • [feat] try to implement vue-i18n for all app (need comments)

    [feat] try to implement vue-i18n for all app (need comments)


    ✏️ Mark the necessary items without changing the structure of the PR template.

    • [ ] Pull request template structure not broken


    ℹ️ What types of changes does your code introduce?

    👉 Put an x in the boxes that apply

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    • [x] This change requires a documentation update


    ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

    👉 Put an x in the boxes that apply.

    • [ ] My code follows the style guidelines of this project
    • [x] Is the code format correct
    • [ ] Is the git submission information standard?
    • [ ] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [x] I have commented my code, particularly in hard-to-understand areas
    • [x] I have made corresponding changes to the documentation
    • [x] My changes generate no new warnings
    • [ ] I have added tests that prove my fix is effective or that my feature works
    • [ ] New and existing unit tests pass locally with my changes
    • [ ] Any dependent changes have been merged and published in downstream modules
    opened by ghost 18
  • 页面刷新,在响应错误处理钩子中,调用退出登录,成功跳转登录页面,页面一直处于loading,无法显示登录表单


    1、需求场景,当账号被禁用,期望是退出登录,并且跳转登录页面 尝试在:responseInterceptorsCatch 中 判断 createErrorModal({ title: '提示', content: msg ? msg : t('sys.api.networkExceptionMsg'), onOk: async ()=> { //这里尝试2种方案 都无效 方案1 userStore.setToken(undefined); userStore.setSessionTimeout(true); 方案2 await userStore.logout(true); } }); tip: 这里只有在刷新页面,那一刻无效,如果是账号被禁用之后,只是切换页面,调用接口,这里可以正常跳转登录页面

    need reproduction 
    opened by jekip 17
  • [Table]滚动条样式错位


    image 如图所示,如果包含action将出现双滚动条。 火狐浏览器,示例中的表格既能看到效果。

    need reproduction 
    opened by snowchenlei 17
  • useTable出现卡死导致浏览器崩溃



    need reproduction 
    opened by yanduhantan1991 16
  • 热更新后,菜单和标签全部丢失


    修改一个页面,vite hmr后菜单和标签全部丢失了T_T

    opened by hoozi 13
  • vite-plugin-mock 和vite的proxy同时开启问题

    vite-plugin-mock 和vite的proxy同时开启问题

    vite-plugin-mock 的mock数据如果不存在的话,接口会一直处于pending状态,vite的proxy不起作用

    opened by unforesndprson 13
  • 热更新导致store里面的数据全部重置? 每次修改代码都要刷新页面才行

    热更新导致store里面的数据全部重置? 每次修改代码都要刷新页面才行

    如一个store里面涉及到异步请求数据, 就那这个项目左侧的菜单导航来说, 里面有一些数据是动态加载上去的(不是在store里面写死的, 而是通过别的组件调用 action 或者 mutation, 生成的数据), 这些数据在热更新后全部都会丢失.


    比如说 store/modules/user.ts, 在这个文件中加一行打印代码

    //  在这里打印以下
    @Module({ namespaced: true, name: NAME, dynamic: true, store })
    class User extends VuexModule {
      constructor(props) {
        //  在这里也加个打印

    然后 刷新页面, 可以看到浏览器确实打印了这两行代码


    随便修改一个模板文件. 可以发现浏览器, 又再次打印了这两条信息, 这意味着, 这个store文件在HRM更新的时候, 被重置了? 这样的话, menu热更新后消失, 问题是不是这个导致的?


    我倒腾了一个下午没搞懂 我尝试使用vite 提供的handleHotUpdate钩子, 去过滤掉 store文件的HMR,但是没解决

    奇怪的是, 如果我是直接在/store/index.ts/ 中的 createStore 方法中写的state, 就不会有这个问题


    比如我的某个组件中, 使用了这个 store

      import { GrowthToolWidgetStore } from '/@/store/modules/growth-tool-widget';

    这个组件热更新的时候, 会判断这个store是依赖, 然后又重新调用了一下. 导致动态的state数据全部丢失

    bug hmr 
    opened by carl-jin 11
  • 树形表格添加expandRowByClick: true后点击子节点的时候出现样式问题。

    树形表格添加expandRowByClick: true后点击子节点的时候出现样式问题。

    树形表格添加expandRowByClick: true后点击子节点的时候出现样式问题。


    opened by xietongjian 0
  • 强烈建议 精简版的把i18n去掉把 配置这个太麻烦了况且很少用到这个功能 能用到国际化的企业估计也不会选这个模板了

    强烈建议 精简版的把i18n去掉把 配置这个太麻烦了况且很少用到这个功能 能用到国际化的企业估计也不会选这个模板了

    Subject of the feature

    Describe your issue here.


    If the feature requests relates to a problem, please describe the problem you are trying to solve here.

    Expected behaviour

    What should happen? Please describe the desired behaviour.


    What are the alternative solutions? Please describe what else you have considered?

    opened by taolei1990 3
  • 请问如何点击菜单跳转到一个新的页面,类似a标签里的target:

    请问如何点击菜单跳转到一个新的页面,类似a标签里的target: "_blank"功能

    我正在开发数据大屏的功能,需要点击菜单重新打开一个新页面,展示我的大屏数据,这样方便F11全屏。 我以前的项目是在路由菜单的meta里添加这个,target: '_blank': { path: '#/datav', name: 'Datav', meta: { title: '新七天实时销售', keepAlive: false ,target: '_blank'}, component: () => import('@/views/datav/index') },

    opened by yangyanju 4
  • Jwt(accessToken + refreshToken) 认证方式的支持

    Jwt(accessToken + refreshToken) 认证方式的支持

    vben中封装了axios的requestInterceptors, responseInterceptors。 但这样的封装缺少了灵活性,使得无法在拦截器中做到 Jwt(accessToken + refreshToken) 的无感刷新。 比如accessToken 5分钟有效期,refreshToken7天有效期,当返回401后需要拿到refreshToken再 多发一个请求,成功后重新设置accessToken. 希望在axios 的包装设计时考虑到这种情况,留下一个扩展点。


    opened by jiangyimin 1
  • EditableCell 自定义labelField 和valueField 无效

    EditableCell 自定义labelField 和valueField 无效

    222 EditableCell 自定义labelField 和valueField 无效,谢谢了
    opened by ckbabby 3
  • a标签在开发环境中初次加载时可以跟随系统主题颜色,正式环境会失去颜色渲染


    image 本地开发环境第一次加载的时候可以看到a标签是跟随系统主题色的,打包正式环境以后会失去a标签会失去颜色渲染,需要手动点击的时候才会跟随系统主题色(开发环境都是没有问题的, 打包发布正式环境有这个问题) image

    opened by wllgh 0
  • 按需加载有考虑使用antdv里推荐的vite-plugin-components插件么?



    opened by zzs89117920 1
  • 希望能够增加宽度resize的时候,有一个变量,监听resize变化, 不是getIsMobile这个变量,这个变量太简单了

    希望能够增加宽度resize的时候,有一个变量,监听resize变化, 不是getIsMobile这个变量,这个变量太简单了

    Subject of the feature

    希望能够增加宽度resize的时候,有一个变量,监听resize变化, 不是getIsMobile这个变量,这个变量太简单了



    opened by JokerLoLgrey 0
  • 页面的一些警告


    1. 分页组件 image image

    分页接口返回的total 为字符串就会报警告。

    场景: 为了防止精度丢失, 后端会将Long 类型的值 以字符串形式返回给前端

    opened by zuihou 4
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

??????vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

good luck 9.6k Jul 24, 2021
🔥基于Furion/.NET 5实现的通用管理平台。整合最新技术,模块插件式开发,前后端分离,开箱即用。集成EF Core、多租户、缓存、数据校验、鉴权、事件总线、动态API、通讯、远程请求、任务调度、gRPC等众多黑科技。代码简洁、易扩展,让开发更简单、更通用、更流行!

Admin.NET 前后端分离架构,开箱即用,紧随前沿技术 ?? 概述 基于.NET 5实现的通用权限管理平台(RBAC模式)。整合最新技术高效快速开发,前后端分离模式,开箱即用。 后台基于Furion框架,前端基于小诺Antd Vue框架。集EFCore、多租户、分库读写分离、缓存、数据校验、鉴权

zuohuaijun 5 Jul 18, 2021
Vite2 + Vue3.0 + ant-design 2.x

vite2-vue3-admin Vite2 + Vue3.0 + ant-design 2.x 线上地址 tips:可注册成功后登入 目录树 ├─public └─src ├─api ├─assets │ ├─font │ ├─icon │ ├─img

Lwp2333 12 Jul 15, 2021
An elegant dashboard

D2Admin is a fully open source and free enterprise back-end product front-end integration solution, using the latest front-end technology stack, javas

D2 Projects 10.7k Jul 26, 2021
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 5.4k Jul 24, 2021
🐜 Ant Design Pro's implementation with Vue

?? Ant Design Pro's implementation with Vue

null 2.5k Jul 29, 2021
🎉 A magical vue admin

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui. vue-element-admin is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you.

花裤衩 69.5k Jul 25, 2021
A vue3 version of vue-element-admin

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.

Ziwen Mei 348 Jul 24, 2021
🖖 A vue-cli 3.0 + typescript minimal admin template

vue-typescript-admin-template is a production-ready front-end solution for admin interfaces based on vue, typescript and UI Toolkit element-ui

Chong Guo 3.9k Jul 25, 2021
Restful Admin Dashboard Based on Vue and Boostrap 4

REST-ADMIN 中文文档 An Powerful Admin Dashboard based on Boostrap-Vue. Demo: http://rest-admin.genyii.com/ admin admin Please support me on https://afdian

Johnny Wu 590 Jul 24, 2021
Open Admin是基于 Spring Boot + Spring Security + Mybatis + Vue Antd Admin Pro + Mysql开发的框架,致力于为用户生成定制的前后端脚手架框架。

项目介绍 Open Admin是基于 Spring Boot + Spring Security + Mybatis + Vue Antd Admin Pro + Mysql开发的框架,致力于为用户生成定制的前后端脚手架框架,系统集成了同步菜单、异步菜单、RBAC、 菜单权限、日志管理、Excel导

cxp1539 179 Jul 18, 2021
vue-admin-work是一个中后台系统管理方案。使用 vue2.x 及周边全家桶工具开发而来。支持多种功能,不同角色权限🚀🚀🚀🎉🎉

vue-admin-work是一个中后台系统管理方案。使用 vue2.x 及周边全家桶工具开发而来。支持多种功能,不同角色权限??????????

null 5 Jun 6, 2021

Vue3 Element Admin 简介 Vue3 Element Admin 是一个免费开源的中后台模版。基于vue3+ElementPlus+Vite开发,是一个开箱即用的中后台系统前端解决方案,它可以帮助你快速搭建企业级中后台产品原型,也可用于学习参考。 在线预览 使用文档 项目地址 git

ZSEN 17 Jul 23, 2021
Admin One - Vue.js 3 Tailwind CSS admin dashboard template

Admin One - Vue.js 3 Tailwind CSS admin dashboard template

JustBoil.me 50 Jul 23, 2021