Teek Design Vue3

Github ｜ Gitee ｜ Preview ｜Docs

简体中文 | English

Teek is a powerful, feature-rich, out-of-the-box admin management system solution built on Vue3, TypeScript, Vite, and ElementPlus.

This repository is the full version with complete example code. For the simplified version, please see Teek Design Vue3 Template.

Documentation

Online Preview

Teek Design Vue3

Screenshots

Only some screenshots are listed below. For more features, please visit Teek Design Vue3

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


pnpm install

Compile and run


pnpm dev

After the project starts, the browser will automatically open with the address: http://localhost:8099/.

Project Packaging

Package for testing environment


pnpm build:test

Package for production environment


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: