# teek-design-vue3
**Repository Path**: kele-bingtang/teek-design-vue3
## Basic Information
- **Project Name**: teek-design-vue3
- **Description**: 基于 Vue3 + TypeScript 搭建的后台系统模板
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://vue3-admin.teek.top/
- **GVP Project**: No
## Statistics
- **Stars**: 42
- **Forks**: 12
- **Created**: 2023-04-28
- **Last Updated**: 2025-11-13
## Categories & Tags
**Categories**: backend
**Tags**: None
## README
# Teek Design Vue3
[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/)
[简体中文](./README.md) | **English**
Teek is a powerful, feature-rich, out-of-the-box admin management system solution built on [Vue3](https://github.com/vuejs/core), [TypeScript](https://www.typescriptlang.org/), [Vite](https://github.com/vitejs/vite), and [ElementPlus](https://element-plus.org/zh-CN).
This repository is the full version with complete example code. For the simplified version, please see [Teek Design Vue3 Template](https://github.com/Kele-Bingtang/teek-design-vue3-template).
## Documentation
[Documentation](https://vue3-design-docs.teek.top/)
## Online Preview
[Teek Design Vue3](https://vue3-design.teek.top/)
## Screenshots
Only some screenshots are listed below. For more features, please visit [Teek Design Vue3](https://vue3-design.teek.top/)
## Core Features
- Beautiful and practical interface: Carefully optimized front-end interface with clear project structure and simple, readable code, making the project easier to get started with and learn
- Standardized engineering workflow: Configured with `Eslint`, `Prettier`, `Husky`, `Commitlint`, `Lint-staged` to standardize front-end engineering code specifications, improving code quality and team collaboration efficiency
- Complete packaging optimization solution: Built-in standardized packaging directory with packaging compression function to reduce package size and improve application loading speed and user experience
- Rich component system: Provides rich `ElementPlus` super components, page-level components, and editor components. Further encapsulates ElementPlus tables, forms, and description list components based on JSON configuration items to quickly build pages
- Rich compositional functions: Provides rich and commonly used `Composables (Hooks)` function encapsulation to implement reuse concepts, reduce repetitive development, and improve efficiency
- Personalized theme configuration: Provides powerful and rich `CSS` theme variables and layout variables, supporting theme color, light mode, dark mode, and color weakness mode switching to meet different users' visual preferences
- Flexible layout system: Provides six layout switches: vertical, classic, horizontal, column, mixed, and embedded to meet interface requirements for different business scenarios. Supports free switching between light/dark modes and custom theme color configuration
- Complete permission control: Uses the `RBAC` permission control model to provide fine-grained permission management solutions at menu, route, and button levels to ensure system security and access control
- Powerful data display capabilities: Provides rich data display and interactive components such as tables, charts, and forms to meet various data visualization needs
- Out-of-the-box functionality: Integrates commonly used functions such as routing, state management, network requests, `Mock` data, internationalization, and `IFrame` embedding to reduce repetitive development work
- Easily extensible architecture design: Modular design for easy feature expansion and custom development, supporting custom directives and compositional functions
- Internationalization support: Built-in common internationalization conversion functions, supporting custom internationalization switching for easy multi-language application implementation
- IFrame embedding function: Provides `IFrame` embedding, `IFrame` caching, and `IFrame` navigation functions, which can be used as a `Portal` portal, subsystem, or single-page application solution
- Multiple icon type support: Supports rendering of multiple icon types such as `IconFont`, `SVG`, and `Iconify` for quick integration of the most popular icon libraries on the market
## Local Development
Install dependencies
```sh
pnpm install
```
Compile and run
```sh
pnpm dev
```
After the project starts, the browser will automatically open with the address: `http://localhost:8099/`.
## Project Packaging
Package for testing environment
```sh
pnpm build:test
```
Package for production environment
```sh
pnpm build
# or
pnpm build:prod
```
## Support This Project
If you are using this project and feel it has helped you, or if you want to support my continued development, you can support me in any of the following ways:
- Star and share [Teek Design Vue3](https://github.com/Kele-Bingtang/teek-design-vue3) 🚀
- Sponsor through the QR codes below to buy the author a cup of tea 🍵
Thank you! ❤️
| WeChat Pay | WeChat | Alipay |
| :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|
Your sponsorship will help Teek:
- Maintain project infrastructure
- Invest more time in development
- Provide better technical support
- Develop more practical features
## Acknowledgements
❤️ Thank you to friends who support this project - your help makes this project better!
❤️ Thank you to friends who contributed code to this project → [Contributors](https://github.com/Kele-Bingtang/teek-design-vue3/graphs/contributors)