VueVite后台

stepin-template — Vue 后台模板

作者 stepui

基于 Vue 与 Vite 的中后台前端模板，集成 Ant Design Vue 与 Tailwind CSS，内置主题定制、多页签和权限控制。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

桌面端首页

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-08查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Vue 与 Vite，集成 Ant Design Vue 和 Tailwind CSS

支持主题定制并实时动态切换

内置多页签功能

内置权限控制，兼容 ABAC 与 RBAC 模型

提供内置业务组件与常用页面模板

模板详细介绍

Stepin Template 是一个中后台前端模板，技术栈为 Vue、Vite，并集成 Ant Design Vue 与 Tailwind CSS。它源自 Vue Antd Admin 的 Vue3 版本，仓库采用 MIT 许可，可免费使用、修改、商用和分发，分发时需保留版权与许可声明。

模板提供主题定制与实时切换、多页签、权限控制（兼容 ABAC 与 RBAC 模型），以及若干内置业务组件和常用页面模板。README 给出环境要求：git ^2.15.0、node ^16.14.0、yarn ^1.21.1；浏览器支持 Edge、Firefox、Chrome、Safari、Opera 的最近两个版本。

使用流程为克隆仓库、yarn install 安装依赖、yarn dev 启动，控制台输出本地访问地址。演示图片、字体、图标等第三方素材需按各自许可核对，域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

VueVite后台

适合你的项目吗？

适用场景

搭建中后台管理系统的前端界面
需要多页签工作流的后台项目
需要按角色或属性控制访问权限的管理端
希望统一主题与样式的后台前端开发

适合人群

使用 Vue 技术栈开发中后台的团队
需要权限控制与多页签的后台项目
希望基于现成模板二次开发的开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
环境要求：git ^2.15.0、node ^16.14.0、yarn ^1.21.1
2
克隆仓库后执行 yarn install 安装依赖
3
执行 yarn dev 启动，控制台会输出本地访问地址
4
演示图片、字体、图标等第三方素材需按各自许可核对
5
域名、托管、数据库、支付或 AI 等外部服务可能另外收费

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
参与社区交流需加入指定的 QQ 群（群号 441231578），属于可选的社区支持渠道，非使用模板的强制要求。
README 提供打赏作者的入口（支付宝/微信收款码），属自愿捐赠，不影响模板的免费使用。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

加入社群，与小伙伴们一同交流心得。QQ 群：441231578
README 原文

如果该项目对您有所帮助，可以请作者喝一杯咖啡。
README 原文

https://github.com/stepui/stepin-template/blob/main/LICENSE https://github.com/stepui/stepin-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-08。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 81 / 100
技术栈: Vue · Vite
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2024-08-12
截图检查日期: 2026-10-08

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-08

查看当时使用的来源资料

SHA-256: 173687b568cef4a9bc88043380c6b6fcb765953d85b1ced7da08bdc8b360fe33

2026-10-08T12:36:42.041Z

来源文件 / 仓库

<h1 align="center">Stepin Template</h1>

<div align="center">

开箱即用的中后台前端/设计解决方案
<br/>
(原[ Vue Antd Admin](https://github.com/iczer/vue-antd-admin/) Vue3 版本)

![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/stepui/stepin-template)
![GitHub repo size](https://img.shields.io/github/repo-size/stepui/stepin-template)
![GitHub last commit](https://img.shields.io/github/last-commit/stepui/stepin-template)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/stepui/stepin-template)
![Docs by iczer](https://img.shields.io/badge/docs%20by-iczer-green)

![preview](./docs/images/preview.png) 

</div>

简体中文 | [English](./README-en_US.md)

- 预览地址: https://stepin-template.pages.dev
- 使用文档: https://docs.stepin-template.pages.dev
- 常见问题: https://docs.stepin-template.pages.dev/issue
- 国内镜像: https://gitee.com/stepui/stepin-template

## 特性

- 强大的主题定制功能，实时动态切换
- 多页签功能，助力后台管理高效开发
- 内置权限控制，兼容 ABAC 和 RBAC 模型
- 丰富的内置业务组件和常用页面模板

## 浏览器支持
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --- | --- | --- | --- | --- |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 环境要求

|git|node|yarn|
|---|----|----|
|`^2.15.0`|`^16.14.0`|`^1.21.1`|

## 使用

### 拉取代码

```sh
git clone https://github.com/stepui/stepin-template.git
```

### 安装依赖

```sh
yarn install
```

### 启动

```sh
yarn dev
```

### 预览

启动成功后，控制台会显示本地访问地址：http://127.0.0.1:5173，浏览器打开即可预览。

更新多信息请参考 [使用文档](http://stepui.gitee.io/stepin-template-docs/)

## 参与贡献

我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 :star2:：

- 在你的公司或个人项目中使用 Stepin Template。
- 通过 [Issue](https://github.com/stepui/stepin-template/issues/new) 报告:bug:或进行咨询。
- 提交 [Pull Request](https://github.com/stepui/stepin-template/pulls) 改进 Stepin Template 的代码。
- 加入社群，与小伙伴们一同交流心得。QQ 群：441231578

## 打赏作者
如果该项目对您有所帮助，可以请作者喝一杯咖啡。
<p>
  <img src="./docs/images/alipay.png" width="320px" style="display: inline-block; border-radius: 8px;" />
  <img src="./docs/images/wechatpay.png" width="320px" style="display: inline-block; margin-left: 24px; border-radius: 8px;" />
</p>

反馈内容错误