# Teek Admin
**Repository Path**: alexfengfeng/teek-admin
## Basic Information
- **Project Name**: Teek Admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-05
- **Last Updated**: 2026-01-05
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Teek Design Vue3 - 精简版
> 基于 Vue 3 + TypeScript + Vite + Element Plus 的后台管理系统模板(精简版)
[Github](https://github.com/Kele-Bingtang/teek-design-vue3) ｜ [Gitee](https://gitee.com/kele-bingtang/teek-design-vue3) ｜ [Preview](https://vue3-design.teek.top/) ｜[Docs](https://vue3-design-docs.teek.top/) ｜[开发指南](./docs/DEVELOPMENT_GUIDE.md)
**简体中文** | [English](./README.en.md)
## 📖 项目简介
这是 **Teek Design Vue3** 的**精简版本**,保留了核心框架和基本管理功能,删除了大部分示例页面,适合作为新项目的起点模板。
### 主要特点
✅ **核心框架完整** - 保留路由、状态管理、布局、HTTP、权限等核心功能
✅ **组件库齐全** - 保留所有组件(Pro超级组件、编辑器、图表等)
✅ **示例精简** - 只保留工作台、仪表盘、编辑器、1-2个超级组件示例
✅ **开箱即用** - 登录、权限、主题、国际化等功能完备
✅ **易于扩展** - 清晰的项目结构,便于添加业务页面
### 完整版 vs 精简版
- **完整版**: 包含所有示例页面(表格、表单、Excel、权限、工具等) - 适合学习参考
- **精简版**: 只保留核心框架和少量示例 - 适合项目开发
该仓库为**精简版**,如需完整版请访问 [Teek Design Vue3](https://github.com/Kele-Bingtang/teek-design-vue3)。
## 📚 文档
- [使用文档](https://vue3-design-docs.teek.top/) - 完整的功能文档
- [开发指南](./docs/DEVELOPMENT_GUIDE.md) - 精简版开发指南
## 🚀 快速开始
### 安装依赖
```bash
pnpm install
```
### 开发环境运行
```bash
pnpm dev
```
项目启动后自动打开浏览器,地址为:`http://localhost:8099/`
### 生产环境打包
```bash
pnpm build
```
## 📂 项目结构
```text
src/
├── common/ # 公共模块(配置、HTTP、工具、样式)
├── components/ # 组件库(Pro组件、编辑器、图表等)
├── composables/ # 组合式函数
├── layout/ # 布局系统(6种布局)
├── pinia/ # 状态管理
├── router/ # 路由系统
├── views/ # 页面视图
│ ├── core/ # 核心页面(登录、错误页)
│ ├── workbenches/ # 工作台
│ ├── dashboard/ # 仪表盘
│ ├── editor/ # 编辑器
│ ├── websocket/ # WebSocket示例
│ └── pro/ # 超级组件示例(已精简)
└── types/ # 类型声明
```
## ✨ 保留的功能
### 核心框架
- ✅ 路由系统(Vue Router + 动态路由)
- ✅ 状态管理(Pinia + 持久化)
- ✅ 布局系统(6种布局模式)
- ✅ HTTP请求(Axios封装)
- ✅ 权限管理(RBAC模型)
- ✅ 主题系统(明暗主题 + 自定义主题色)
- ✅ 国际化(Vue I18n)
### 保留的页面
- ✅ 登录页(多种登录方式)
- ✅ 工作台(首页仪表盘)
- ✅ 仪表盘(控制台、数据分析、电商)
- ✅ 编辑器(TinyMCE、WangEditor、CodeMirror)
- ✅ 超级组件示例(ProTable、ProForm)
- ✅ WebSocket示例
- ✅ 个人中心、消息中心
- ✅ 错误页面(403/404/500)
### 所有组件
- ✅ Pro超级组件(表格、表单、搜索、页面等)
- ✅ 基础组件(图标、权限、验证码等)
- ✅ 编辑器组件(富文本、代码编辑器)
- ✅ 页面组件(裁剪、上传、图表等)
- ✅ 卡片组件(统计卡片、图表卡片)
- ✅ 图表组件(基于ECharts)
## 效果在线预览
[Teek Design Vue3](https://vue3-design.teek.top/)
## 效果图
下面只列出部分效果图，更多的功能请访问 [Teek Design Vue3](https://vue3-design.teek.top/)
## 核心特性
- 界面美观实用：精心优化前端界面，项目结构清晰，代码简单易读，使项目更易于上手和学习
- 规范工程化工作流：配置 `Eslint`、`Prettier`、`Husky`、`Commitlint`、`Lint-staged` 规范前端工程代码规范，提高代码质量和团队协作效率
- 完善的打包优化方案：内置规范的打包目录，提供打包压缩功能，减少打包体积，提升应用加载速度和用户体验
- 丰富的组件系统：提供丰富的 `ElementPlus` 超级组件、页面级组件、编辑器组件，基于 `ElementPlus` 的表格、表单、描述列表组件进一步封装，采用 JSON 配置项驱动的方式，快速构建页面
- 丰富的组合式函数：提供丰富常用的 `Composables（Hooks）` 函数封装，实现复用思想，减少重复开发，提高效率
- 个性化主题配置：提供强大丰富的 `CSS` 主题变量、布局变量，支持主题色、浅色、深色、色弱等模式切换，满足不同用户的视觉偏好
- 灵活的布局系统：提供纵向、经典、横向、分栏、混合、嵌入六大布局切换，满足不同业务场景的界面需求。支持浅色/深色模式自由切换，以及自定义主题色配置
- 完善的权限管控：采用 `RBAC` 权限管控模型，提供菜单、路由及按钮级别的细粒度权限管理方案，确保系统安全性和访问控制
- 强大的数据展示能力：提供表格、图表、表单等丰富的数据展示和交互组件，满足各种数据可视化需求
- 开箱即用的功能：集成路由、状态管理、网络请求、`Mock` 数据、国际化、`IFrame` 嵌入等常用功能，减少重复开发工作
- 易于扩展的架构设计：模块化设计，便于功能扩展和定制化开发，支持自定义指令和组合式函数
- 国际化支持：内置常用国际化转换函数，支持自定义国际化切换，轻松实现多语言应用
- IFrame 嵌入功能：提供 `IFrame` 嵌入、`IFrame` 缓存、`IFrame` 跳转等功能，可作为 `Portal` 门户、子系统、单页应用解决方案
- 多种图标类型支持：支持 `IconFont`、`SVG`、`Iconify` 等多种图标类型渲染，快速集成市面上最流行的图标库
## 本地开发
安装依赖
```sh
pnpm install
```
编译运行
```sh
pnpm dev
```
项目启动后自动打开浏览器，地址为：`http://localhost:8099/`。
## 项目打包
打包运行（测试环境使用）
```sh
pnpm build:test
```
打包运行（生产环境使用）
```sh
pnpm build
# or
pnpm build:prod
```
## 支持这个项目
如果您正在使用这个项目并感觉这个项目给你带来帮助，或者是想支持我继续开发，您可以通过如下任意方式支持我：
- Star 并分享 [Teek Design Vue3](https://github.com/Kele-Bingtang/teek-design-vue3) 🚀
- 通过以下二维码进行赞助，打赏作者一杯茶 🍵
谢谢！❤️
| 微信赞赏 | 微信 | 支付宝 |
| :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|
您的赞助将帮助 Teek：
- 维护项目的基础设施
- 投入更多时间进行开发
- 提供更好的技术支持
- 开发更多实用功能
## 致谢
❤️ 感谢支持这个项目的朋友，您的每一份帮助都让这个项目变得更好！
❤️ 感谢为这个项目贡献代码的朋友 → [Contributors](https://github.com/Kele-Bingtang/teek-design-vue3/graphs/contributors)