Provides both Webpack and Vite branch versions, allowing selection based on build tool preference
VueViteAdmin dashboard
admin-antd-vue — Vue Admin dashboard Template
By lqsong
A Vue 3 and Ant Design admin template offering both Webpack and Vite branches, with login, permission verification, internationalization, and various list and form example pages.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-02View source
What stands out
A quick read of the recorded project description.
Includes login, logout, and registration flows, as well as three types of permission verification: page permissions, button operations, and permission configuration
Global features include internationalization, a dynamic sidebar with multi-level nested routes, customizable dynamic breadcrumbs, and Svg Sprite icons
UniversalLayout supports switching menu navigation between inline and horizontal, and switching between dark and light themes; IndexLayout can toggle whether to enable a dynamic top-level menu
Comprehensive examples cover editors, icons, lists, forms, details, and other example pages, and include a Vue 3 real-world case study based on this template
Licensed under MIT, permitting free use, modification, commercial use, and distribution of this version's code
Template Details
admin-antd-vue is a Vue 3 + Ant Design admin frontend template. The repository maintains two branches: Webpack and Vite. The default branch is the Webpack + Vue 3.x + antd version, while the Vite version is on the vite branch. The template includes login, logout, and registration flows, as well as three types of permission verification: page permissions, button operations, and permission configuration. Global features include internationalization, a dynamic sidebar supporting multi-level nested routes, customizable dynamic breadcrumbs, Svg Sprite icons, and mock data. IndexLayout supports toggling whether to enable a dynamic top-level menu. UniversalLayout additionally supports switching the menu navigation mode between inline and horizontal, and switching the theme between dark and light. Comprehensive examples cover guide pages, CKEditor and tui-editor editors, IconSvg and IconFont icons, as well as standard list, table list, height-adaptive table, search list, basic form, advanced form, basic detail, module detail, and table detail pages. The project provides a documentation site and includes a Vue 3 real-world case study based on this template, lqsblog-frontend-admin-vue. Note: the online demo uses an online mock service, which the README explicitly states is unstable; if online login fails, you can pull it locally and run it directly to view. Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses.
VueViteAdmin
Is it right for your project?
Use Cases
- Building the frontend of a mid-to-back-office management system that requires login and permission verification
- Quickly organizing business pages starting from ready-made list, form, and detail example pages
- Backend projects that need internationalization, a dynamic sidebar, and breadcrumbs
- Selecting between or migrating between Webpack and Vite build solutions
Suitable For
- Frontend teams using Vue 3 and Ant Design to develop admin interfaces
- Mid-to-back-office projects that require permission verification and multilingual support
- Developers who want to reference or reuse list, form, detail, and other page examples
- Backend projects that need a Webpack or Vite build solution
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Install dependencies with yarn or npm install; the README recommends yarn
- 2
Run in development mode with yarn serve or npm run serve; build for production with yarn build or npm run build
- 3
In local or development mode, it is recommended to copy .env.development to .env.development.local before modifying parameters; for production mode, similarly copy .env.production to .env.production.local
- 4
The online demo uses an online mock service, which the README states is unstable; if login fails, you can pull the project locally and run it directly to view
- 5
Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses; the code's MIT license alone is not sufficient to judge
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.
Must comply with when using
- Permits free use, modification, commercial use, and distribution of this version's code.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The online demo relies on an online mock service, which the README explicitly states is unstable; if online login fails, you need to pull the project locally and run it to view the demo.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's MIT license alone is not sufficient to judge.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
https://github.com/lqsong/admin-antd-vue/blob/main/LICENSEhttps://github.com/lqsong/admin-antd-vue/blob/main/README.md**注意：Demo 用的是在线mock服务，不稳定，若在线登录不了pull到本地可直接运行查看demo**
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 81 / 100
- Technologies
- Vue · Vite
- Website type
- Admin dashboard
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2022-09-14
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vue as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: e53f527238abb781acc456fe259ba0394ecdc6773f4635fca885b1ddc9d13fb9
2026-10-02T11:43:11.108Z
Source file / repository# admin-antd-vue
此分支是 Webpack + Vue3.x + antd 版本 ， Vite 版本请查看 vite (分支)（[github](https://github.com/lqsong/admin-antd-vue/tree/vite)、[gitee](https://gitee.com/lqsong/admin-antd-vue/tree/vite)）
## Demo
**注意：Demo 用的是在线mock服务，不稳定，若在线登录不了pull到本地可直接运行查看demo**
| **[基于IndexLayout](http://demo.admin-antd-vue.liqingsong.cc/)** |
:-------------------------:
|  |
|  |
| **[基于UniversalLayout](http://demo-universal.admin-antd-vue.liqingsong.cc/)** |
:-------------------------:
|  |
|  |
|  |
|  |
## Vue3实战案例
- lqsblog-frontend-admin-vue（[Github](https://github.com/lqsong/lqsblog-frontend-admin-vue) 、 [Gitee](https://gitee.com/lqsong/lqsblog-frontend-admin-vue)）
## 使用文档
- [http://admin-antd-vue.liqingsong.cc](http://admin-antd-vue.liqingsong.cc/)
- [Github](https://github.com/lqsong/admin-antd-vue)
- [Gitee](https://gitee.com/lqsong/admin-antd-vue)
## 后台前端解决方案列表
- admin-element-vue（[GitHub](https://github.com/lqsong/admin-element-vue)、[Gitee](https://gitee.com/lqsong/admin-element-vue)）
- admin-antd-vue（[GitHub](https://github.com/lqsong/admin-antd-vue)、[Gitee](https://gitee.com/lqsong/admin-antd-vue)）
- admin-antd-react（[GitHub](https://github.com/lqsong/admin-antd-react)、[Gitee](https://gitee.com/lqsong/admin-antd-react)）
- electron-admin-element-vue（[GitHub](https://github.com/lqsong/electron-admin-element-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-element-vue)）
- electron-admin-antd-vue（[GitHub](https://github.com/lqsong/electron-admin-antd-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-vue)）
- electron-admin-antd-react（[GitHub](https://github.com/lqsong/electron-admin-antd-react)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-react)）
- admin-vue3-micro-qiankun（[GitHub](https://github.com/lqsong/admin-vue3-micro-qiankun)、[Gitee](https://gitee.com/lqsong/admin-vue3-micro-qiankun)）
## 前台前端SSR解决方案列表
- midway-vue3-ssr（[GitHub](https://github.com/lqsong/midway-vue3-ssr)、[Gitee](https://gitee.com/lqsong/midway-vue3-ssr)）
- midway-react-ssr（[GitHub](https://github.com/lqsong/midway-react-ssr)、[Gitee](https://gitee.com/lqsong/midway-react-ssr)）
## 功能
```
- 登录 / 注销 / 注册
- 权限验证
- 页面权限
- 按钮操作
- 权限配置
- 全局功能
- 国际化多语言
- 动态侧边栏（支持多级路由嵌套）
- 动态面包屑（支持自定义配置）
- 动态顶级菜单（IndexLayout支持设置是否启用）
- 菜单导航模式inline/horizontal切换（UniversalLayout支持）
- 主题dark/light切换（UniversalLayout支持）
- Svg Sprite 图标
- Mock 数据
- 综合实例
- 引导页
- 组件示例
- 编辑器
- CKEditor
- tui-editor
- 图标
- IconSvg
- IconFont
- 页面示例
- 列表页面
- 标准列表
- 表格列表
- 高度自适应表格
- 搜索列表
- 表单页面
- 基础表单
- 高级表单
- 详情页面
- 基础详情
- 模块详情
- 表格详情
- 权限验证
```
## 自定义配置
### **(建议)** 本地或开发模式下，不要直接修改 '.env.development'
复制 '.env.development' 重命名为 ' .env.development.local' , 修改对应的参数.
### **(建议)** 生产模式下，不要直接修改 '.env.production'
复制 '.env.production' 重命名为 ' .env.production.local' , 修改对应的参数.
## 项目设置
### 一、Install dependencies,
```bash
$ yarn
```
or
```
$ npm install
```
> 推荐使用 yarn , **[yarn安装与常用命令](http://liqingsong.cc/article/detail/9)** 。
### 二、Compiles and hot-reloads for development
```bash
$ yarn serve
```
or
```
$ npm run serve
```
### 三、Compiles and minifies for production
```bash
$ yarn build
```
or
```
$ npm run build
```
### 四、精简 svg icon
```
$ yarn svgo
```
or
```
$ npm run svgo
```
### 五、Run your unit tests
```
yarn test:unit
#
npm run test:unit
```
### 六、Lints and fixes files
```
yarn lint
#
npm run lint
```
## 捐赠
如果你觉得这个项目帮助到了你，请帮助点击 Star，你也可以请作者喝咖啡表示鼓励.
**ALIPAY** | **WECHAT**
:-------------------------:|:-------------------------:
 | 
Explore similar templates
Compare previews and descriptions within the same stack and category.
vuestic-admin
Vuestic Admin is an open-source Vue 3 admin template maintained by Epicmax, built on Vuestic UI with Vite, Pinia, and Tailwind CSS. It provides a ready-to-run dashboard with a dark theme, global configuration, i18n internationalization, and responsive layout.
Vue · Admin dashboard
v3-admin-vite
v3-admin-vite is an AI-friendly Vue3 admin template built on Vue3, Vite, TypeScript, and Element Plus. It keeps a lean structure with detailed comments, supports backend-controlled dynamic route permissions, page-level and button-level permissions, multiple themes and layouts, and mobile compatibility.
Vue · Admin dashboard
vue-typescript-admin-template
A Vue 2.6 + TypeScript + Element UI admin template ported from vue-element-admin, offering type safety and enterprise features like permission authentication, internationalization, dynamic themes, editors, charts, Excel/PDF handling, and PWA support.
Vue · Admin dashboard
vue-antd-admin
Vue Antd Admin is the Vue implementation of Ant Design Pro, providing an out-of-the-box front-end and design solution for admin dashboards.
Vue · Admin dashboard
coreui-free-vue-admin-template
CoreUI's official free Vue admin template, MIT licensed, built on Vue 3 and the CoreUI component library with Vue Router, Pinia, and Vite.
Vue · Admin dashboard
nova-admin
Nova Admin is an admin template built on Vue3, Vite, TypeScript, and Naive UI, with Unocss for styling.
Vue · Admin dashboard