版本升级历程
Teek 于 2022 年 8 月 28 日开始推到 GitHub
,因此可以算是 Teek 的诞生时间。
当时 Teek 以 Vue2
、ElementUI
搭配装饰器模式开发,那一年秋 Teek 是一个初入社会的后端开发毕业生,当时并没有使用过 Vue
开发项目,在实习过程慢慢熟悉了 Vue
的使用。当时公司并没有一套统一的开发模板,于是 Teek 将开发的项目进行整合,自行搭建了一套简易的开发模板,后接触中后台系统开源社区,逐步完善 Teek Vue2
。
Teek Vue3
于 2023 年 2 月 20 日开始推到 GitHub
,其实在推之前,Teek Vue3
已经开发了部分功能(当时因为 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
进行重构,最开始只是对依赖的全面升级和对样式的命名重构,采用 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
等多种图标类型渲染,快速集成市面上最流行的图标库