Skip to content

版本升级历程 ​

Teek 于 2022 年 8 月 28 日开始推到 GitHub,因此可以算是 Teek 的诞生时间。

当时 Teek 以 Vue2、ElementUI 搭配装饰器模式开发,那一年秋 Teek 是一个初入社会的后端开发毕业生,当时并没有使用过 Vue 开发项目,在实习过程慢慢熟悉了 Vue 的使用。当时团队并没有一套统一的开发模板,于是 Teek 将开发的项目进行整合,自行搭建了一套简易的开发模板,后接触中后台系统开源社区,逐步完善 Teek Vue2。

Teek Vue3 于 2023 年 2 月 20 日开始推到 GitHub,其实在推之前,Teek Vue3 已经开发了部分功能(当时因为 Vue2 的停止维护,于是 Teek Vue2 全面升级 Vue3),并逐步迭代至今,随着 Vue3 和 ElementPlus 等核心环境的版本迭代升级,经历了大大小小的语法、特性等升级。

2.x ​

2.x 版本并没有提供更多的公共组件以及很多新功能,更多是重构,重构了样式系统、目录系统、布局系统等,如果你使用过 1.x 的项目,那么会发现使用功能上差异不大,更多的是开发体验、使用体验差异。

本次重构,让项目结构更加清晰,代码可维护性和可扩展性大幅提升,便于后续功能的持续迭代和团队协作。同时,重构优化了主题和样式的管理方式,提供更多的布局配置选择,主题灵活配置和切换,提升了整体开发体验和用户体验。

2.x 的开发大致分为前期、中期、后期 3 个阶段。

前期 ​

在 2.x 开始之前,Teek 去开发了一款 VitePress 主题:VitePress Theme Teek,在开发过程后,Teek 产生了新的思路和用法,于是在开发 VitePress Theme Teek 结束后,就打算对 Teek Design 进行重构,最开始只是对依赖的全面升级和对样式的命名重构,精简根目录(将日常开发不常用的目录放到 common 下),并采用 BEM 思想来让样式更加清晰,并计划重构后只发布一个 1.x 的版本。

正常的规划应该到此结束,然而 Teek 在刷掘金文章的时候,偶然刷到一款后台管理系统 Art Design Pro 的推广,于是点了进去看了下,发现界面颜值很高(推荐 👍),随后就下载源码进行阅读,并由此对 Teek 2.x 开发有了新的方向。

中期 ​

阅读了 Art Design Pro 项目的代码,样式方面的设计让我眼前一亮,当时 Teek 正愁团队设计的 UI 如何与系统进行灵活绑定,于是按照 Art Design Pro 的样式设计思路对 Teek 的样式系统进行了升级,将 ElementPlus 的功能性样式进行替换,并添加和优化了一些 Art Design Pro 的部分公共组件以及功能。

后期 ​

在完成了样式的开发后,Teek 逐步对超级组件(Pro Components)进行升级,在 1.x 版本,超级组件的超级表格最初来源于掘金的一篇 Vue3.2 + Element-Plus 二次封装 el-table(Pro 版 🚀🚀),在评论区也可以看到 Teek 的热评(😊),后逐步完善,衍生了超级表单和超级搜索等组件。

1.x 版本的超级组件已经满足大多数场景,但是 1.x 版本的超级组件采用 Vue3 模板风格和 tsx 风格进行编写,当时虽然写得很舒服,但是如今回看代码显得比较艰难,于是打算升级为 Vue3 模板风格的写法,与项目的设计风格保持一致。

升级的另一个动力是 Teek 发现了一个非常优秀、强大的组件库 plus-pro-components,该组件库与超级组件的设计思想非常类似,都是通过配置项来驱动页面的生成。

Teek 不愿意舍弃已有的超级组件,也打算提高自己的开发能力,于是就参考 plus-pro-components 的组件对超级组件进行了升级,在阅读超级组件的使用文档示例可以发现,数据大部分来源于 plus-pro-components 的文档示例数据。

完成超级组件的升级后,Teek 对系统的全局配置进行了升级,为后续的 monorepo 模式考虑,提供了更多的配置项以及配置场景的选择。

1.x ​

1.x 的最终版本为 1.5.1,因为本文档于 2025 年 8 月 6 日编写,此时正是 2.x 的发版之日,而 1.5.1 的版本停留在 2024 年 12 月 27 日,年代久远,因此 1.x 版本的细节难以回忆并进行赘述。

1.x 版本已经满足了绝大部分场景的中后台管理系统方案,主要有如下功能:

  • 现代化技术栈:采用 Vue3、TypeScript、Vite、Pinia、ElementPlus 等最新技术栈开发,保证项目的技术先进性。通过 Vite 构建工具,项目拥有极快的冷启动和热更新速度,显著提升开发体验。

  • 界面美观实用:精心优化前端界面,项目结构清晰,代码简单易读,使项目更易于上手和学习

  • 规范工程化工作流:配置 Eslint、Prettier、Husky、Commitlint、Lint-staged 规范前端工程代码规范,提高代码质量和团队协作效率

  • 完善的打包优化方案:内置规范的打包目录,提供打包压缩功能,减少打包体积,提升应用加载速度和用户体验

  • 丰富的组件系统:提供丰富的 ElementPlus 超级组件、页面级组件、编辑器组件,基于 ElementPlus 的表格、表单、描述列表组件进一步封装,采用 JSON 配置项驱动的方式,快速构建页面

  • 丰富的组合式函数:提供丰富常用的 Composables(Hooks) 函数封装,实现复用思想,减少重复开发,提高效率

  • 个性化主题配置:提供强大丰富的 CSS 主题变量、布局变量,支持主题色、浅色、深色、色弱等模式切换,满足不同用户的视觉偏好

  • 灵活的布局系统:提供纵向、经典、横向、分栏、混合、嵌入六大布局切换,满足不同业务场景的界面需求。支持浅色/深色模式自由切换,以及自定义主题色配置

  • 完善的权限管控:采用 RBAC 权限管控模型,提供菜单、路由及按钮级别的细粒度权限管理方案,确保系统安全性和访问控制

  • 强大的数据展示能力:提供表格、图表、表单等丰富的数据展示和交互组件,满足各种数据可视化需求

  • 开箱即用的功能:集成路由、状态管理、网络请求、Mock 数据、国际化、IFrame 嵌入等常用功能,减少重复开发工作

  • 易于扩展的架构设计:模块化设计,便于功能扩展和定制化开发,支持自定义指令和组合式函数

  • 国际化支持:内置常用国际化转换函数,支持自定义国际化切换,轻松实现多语言应用

  • IFrame 嵌入功能:提供 IFrame 嵌入、IFrame 缓存、IFrame 跳转等功能,可作为 Portal 门户、子系统、单页应用解决方案

  • 多种图标类型支持:支持 IconFont、SVG、Iconify 等多种图标类型渲染,快速集成市面上最流行的图标库