基于 Vue 3、Vite、Pinia 与 Element Plus 构建的后台前端模板
VueVite后台
admin-element-vue — Vue 后台模板
作者 lqsong
基于 Vue 3、Vite、Pinia 与 Element Plus 的后台前端模板，内置动态路由、权限验证、国际化与 Mock 数据。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-08查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
内置动态路由与权限验证
支持国际化与 Mock 数据
提供 webpack 与 Vite 两个版本分支
附带在线演示与使用文档
代码采用 MIT 许可，允许商用与分发
模板详细介绍
admin-element-vue 的 vite.ts2 分支是一个后台前端解决方案，基于 Frame-Template-Vue 框架与 Element Plus UI 组件实现。它采用 Vue 3、Vite、Pinia 与 Element Plus 的技术组合，提供动态路由、权限验证、国际化和 Mock 数据等能力。仓库同时提供 webpack 版本，本分支为 Vite + Vue 3 + Pinia + Element Plus 版本。
模板附带在线演示与使用文档，演示环境使用在线 mock 服务，README 提示该服务不稳定，若在线登录失败可将代码拉取到本地直接运行查看。项目要求使用 pnpm 进行依赖安装与本地开发。
代码采用 MIT 许可，可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材需按各自许可单独核对，域名、托管、数据库等外部服务可能另行收费。
VueVite后台
适合你的项目吗？
适用场景
- 搭建需要登录与权限控制的后台管理界面
- 在 Vue 3 项目中引入 Element Plus 组件库作为 UI 基础
- 需要动态路由与国际化支持的中后台前端开发
- 使用 Mock 数据在前后端分离开发阶段先行联调
适合人群
- 使用 Vue 3 与 Element Plus 技术栈的前端开发者
- 需要后台管理模板快速启动项目的前端团队
- 希望参考动态路由、权限验证与国际化实现方式的开发者
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
项目要求使用 pnpm 安装依赖，执行 pnpm i 后运行 pnpm dev 启动本地开发
- 2
在线演示使用在线 mock 服务，README 提示其不稳定，登录失败时可拉取代码到本地运行
- 3
使用前请核对演示图片、字体、图标等第三方素材的许可，不能仅凭代码的 MIT 许可判断
- 4
分发代码副本或实质性部分时，需保留原作者版权声明和完整 MIT 许可声明
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 在线演示依赖在线 mock 服务，README 明确说明该服务不稳定；若在线登录失败，需将代码拉取到本地运行才能查看演示。
- 项目要求使用 pnpm 作为包管理器进行依赖安装与本地开发，未按此方式可能无法正常安装或运行。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
**注意：Demo 用的是在线 mock 服务，不稳定，若在线登录不了 pull 到本地可直接运行查看 demo**
README 原文
https://github.com/lqsong/admin-element-vue/blob/vite.ts2/LICENSEhttps://github.com/lqsong/admin-element-vue/blob/vite.ts2/README.md> 请使用 pnpm , **[pnpm 的安装与使用](http://liqingsong.cc/article/detail/26)** 。
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-08。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 81 / 100
- 技术栈
- Vue · Vite
- 网站类型
- 后台
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2024-04-19
- 截图检查日期
- 2026-10-08
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-08
查看当时使用的来源资料
SHA-256: 00253d1ed1384bcfccb1c2a31a37a12a1195a9f5cb7ff13dbc437107d716ac7d
2026-10-08T12:39:05.548Z
来源文件 / 仓库# admin-element-vue-vite-ts2 此分支是 Vite + Vue3.x + Pinia + Element Plus 版本 ， 其他版本请点击其他分支查看。 `admin-element-vue-vite-ts2` 是一个后台前端解决方案，它基于[Frame-Template-Vue](http://frame-template-vue.liqingsong.cc/)框架 、[Element Plus](https://github.com/element-plus/element-plus) UI 组件实现。它使用了最新的前端技术栈、动态路由、权限验证、国际化、Mock 数据等。 ## Demo **注意：Demo 用的是在线 mock 服务，不稳定，若在线登录不了 pull 到本地可直接运行查看 demo** | **[Demo（点击此处）](http://vitets2-demo.admin-element-vue.liqingsong.cc/)** | :-------------------------: |  | |  | |  | |  | |  | |  | ## 使用文档 - [http://admin-element-vue.liqingsong.cc/vitets2/](http://admin-element-vue.liqingsong.cc/vitets2/) - [Github](https://github.com/lqsong/admin-element-vue) - [Gitee](https://gitee.com/lqsong/admin-element-vue) ## 框架模板 - frame-template-vue（[GitHub](https://github.com/lqsong/frame-template-vue)、[Gitee](https://gitee.com/lqsong/frame-template-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)） ## 前台前端解决方案列表 - template-vant-vue（[GitHub](https://github.com/lqsong/template-vant-vue)、[Gitee](https://gitee.com/lqsong/template-vant-vue)） ## 前台前端 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)） ## 快速入门 > 请使用 pnpm , **[pnpm 的安装与使用](http://liqingsong.cc/article/detail/26)** 。 ### 本地开发 ```bash $ pnpm i $ pnpm dev ``` ## 捐赠 如果你觉得这个项目帮助到了你，请帮助点击 Star，你也可以请作者喝咖啡表示鼓励. | **ALIPAY** | **WECHAT** | | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | |  |  |
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
vuestic-admin
Vuestic Admin is an open-source, ready-to-use admin template suite designed for rapid development, easy mainte…
Vue · 后台
v3-admin-vite
v3-admin-vite 是一个主打 AI 编程友好体验的 Vue3 后台管理模板，基于 Vue3、Vite、TypeScript、Element Plus 构建。
Vue · 后台
vue-typescript-admin-template
vue-typescript-admin-template 是一套面向后台管理界面的前端解决方案，基于 Vue 2.6、TypeScript 和 Element UI 构建。
Vue · 后台
vue-antd-admin
Vue Antd Admin 是 Ant Design Pro 的 Vue 实现版本，目标是为中后台项目提供一套开箱即用的前端与设计解决方案。
Vue · 后台
coreui-free-vue-admin-template
Free Vue Admin & Dashboard Template Built for AI-Assisted Development
Vue · 后台
nova-admin
A simple and flexible admin template based on Vue3, Vite, TypeScript, NaiveUI
Vue · 后台