介绍
关于 Teek
Teek 是一个基于 Vue3、TypeScript、Vite、ElementPlus 构建的颜值强大、功能丰富、开箱即用的中后台管理系统解决方案,专为开发者打造。它不仅是一个前端框架,更是一整套企业级开发的最佳实践集合。无论您是想要快速搭建管理系统原型,还是构建复杂的企业应用,Teek 都能为您提供强有力的支持。
Teek 采用 Vue3 Composition API
设计模式,结合 TypeScript
强类型系统,确保代码质量和开发效率。通过 Vite 构建工具,项目拥有极快的冷启动和热更新速度,显著提升开发体验。基于现代化的前端技术栈,Teek 还集成了 Pinia
状态管理库,替代传统的 Vuex
,提供更简洁高效的 API
。
此外,Teek 集成 ElementPlus
UI 组件库,继承了其成熟的设计理念和丰富的组件体系,并进行了现代化 UI 升级,丰富用户界面。
核心特性
现代化技术栈
采用 Vue3
、TypeScript
、Vite
、Pinia
、ElementPlus
等最新技术栈开发,保证项目的技术先进性。通过 Vite
构建工具,项目拥有极快的冷启动和热更新速度,显著提升开发体验。
界面美观实用
精心优化前端界面,项目结构清晰,代码简单易读,使项目更易于上手和学习。
规范工程化工作流
配置 Eslint
、Prettier
、Husky
、Commitlint
、Lint-staged
规范前端工程代码规范,提高代码质量和团队协作效率。
完善的打包优化方案
内置规范的打包目录,提供打包压缩功能,减少打包体积,提升应用加载速度和用户体验。
丰富的组件系统
提供丰富的 ElementPlus
超级组件、页面级组件、编辑器组件、卡片组件、EChart
组件,基于 ElementPlus
的表格、表单、描述列表组件进一步封装,采用 JSON 配置项驱动的方式,快速构建页面。
丰富的组合式函数
提供丰富常用的 Composables(Hooks)
函数封装,实现复用思想,减少重复开发,提高效率。
个性化主题配置
提供强大丰富的 CSS
主题变量、布局变量,支持主题色、浅色、深色、色弱等模式切换,满足不同用户的视觉偏好。
灵活的布局系统
提供纵向、经典、横向、分栏、混合、嵌入六大布局切换,满足不同业务场景的界面需求。支持浅色/深色模式自由切换,以及自定义主题色配置。
完善的权限管控
采用 RBAC
权限管控模型,提供菜单、路由及按钮级别的细粒度权限管理方案,确保系统安全性和访问控制。
强大的数据展示能力
提供表格、图表、表单等丰富的数据展示和交互组件,满足各种数据可视化需求。
开箱即用的功能
集成路由、状态管理、网络请求、Mock
数据、国际化、IFrame
嵌入等常用功能,减少重复开发工作。
易于扩展的架构设计
模块化设计,便于功能扩展和定制化开发,支持自定义指令和组合式函数。
国际化支持
内置常用国际化转换函数,支持自定义国际化切换,轻松实现多语言应用。
IFrame 嵌入功能
提供 IFrame
嵌入、IFrame
缓存、IFrame
跳转等功能,可作为 Portal
门户、子系统、单页应用解决方案。
多种图标类型支持
支持 IconFont
、SVG
、Iconify
等多种图标类型渲染,快速集成市面上最流行的图标库。
适用场景
Teek 适用于各类中后台管理系统开发,包括但不限于:
- 企业内部管理系统
- 电商平台运营后台
- 数据分析平台
- 内容管理系统
- 工作流程管理系统
- 监控运维平台
- ...
效果预览
如果您需要 Vue2 版,则请访问:Teek Design Vue2
精简版
精简版 是基于 Teek Design Vue3
提炼出的框架,只包含布局、构建等框架必须内容,更适合实际项目开发。
浏览器支持
本地开发推荐使用 Chrome
最新版浏览器,不支持 Chrome 80
以下版本。
生产环境支持现代浏览器,不支持 IE
。
![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
不支持 | last 2 versions | last 2 versions | last 2 versions | last 2 versions |