摘要：本篇文章将以解决 Element Plus 问题的经历开始，循序渐进讨论开源项目或开源框架的问题，进一步讨论驾驭开源项目源代码的方法和技巧，分享自己阅读、理解和更改源代码的思路。
本文分享自华为云社区《优秀开源框架就一定靠谱么？五招助你驾驭源代码》，原文作者：Marvin Zhang 。
前言The most incomprehensible thing about the world is that it is comprehensible.
世界上最不可理解的地方就是它竟然是可以理解的。-- 阿尔伯特·爱因斯坦
开源（Open-Source）造就了如今繁荣活跃的软件行业。开源让全世界的开发者都能够协力编写出优秀的工具类项目，也就是所谓的 “轮子”，在造福大大小小的公司个人的同时，也可以展现创作者或贡献者的技术实力。如今很多开发者都在大量使用开源项目作为自己项目的第三方库或依赖，更快更高效的完成开发任务。
笔者也不例外。我最近在用 Vue 3 重构 Crawlab 前端的时候，用到了 Element 团队开发的升级版的 ElementUI，也就是 Vue 3 重构的新 UI 框架 Element Plus。Element 团队在 Element Plus 中将该项目用 Vue 3 完全重构，全面拥抱了TypeScript；而且相比于之前的 Vue 2 版本丰富了部分组件；而整体风格和使用方式跟之前的版本一致；一些 API 在使用上还变得更精简了。因此，笔者在重构 Crawlab 前端初期过程中没有遇到太大的障碍，再加上之前的编写经验，开发过程中显得驾轻就熟。然而，好景不长，随着项目的不断开发，笔者遭遇到一些技术上的困难。更准确的说，在实现一些复杂功能时遇到了来自于 Element Plus 框架本身的限制。虽然最终想方设法将问题解决了，但是我也深刻体会到了硬啃（Hacking）开源项目源代码的困难。因此，也希望借此机会将自己驾驭开源代码的经验分享给读者。
本篇文章将以解决 Element Plus 问题的经历开始，循序渐进讨论开源项目或开源框架的问题，进一步讨论驾驭开源项目源代码的方法和技巧，分享自己阅读、理解和更改源代码的思路。本篇文章主要是方法论的讨论，不涉及太多技术细节，任何专业背景的读者都可阅读。
硬啃 Element Plus
如果你是使用过 Vue 的前端工程师，你肯定听说过 ElementUI。这是一个 UI 框架，也就是说它是帮助你构建 Web 项目的工具类框架，其中包含很多常用的组件（Component）、布局（Layout）以及主题（Theme）等。早期的 ElementUI 是用 Vue 2 写的，是 Vue 中最受欢迎的 UI 框架，在 Github 上有 49k 标星，是第二名 iView（24k）的两倍多。随着 Vue 作者尤雨溪发布 Vue 3 版本，宣告全面拥抱 TS 之后，原 Element 团队在 Vue 3 的基础上开发了新版本 Element Plus，也就是这个故事的主角。如果对 Vue 3 甚至 Vue 不了解，可以阅读本博客之前的技术文章《TS 加持的 Vue 3，如何帮你轻松构建企业级前端应用》。
初试牛刀Element Plus 的使用方法跟之前的 Vue 2 版本一样简单易用，文档风格也跟老版本一致，非常全面。按照官方文档鼓励的，笔者也尝试用组件化的方式来优化之前的 Crawlab 老组件，例如表格（Table）。除了将列表（Column）、数据（Data）、分页（Pagination）等进行简单的封装以外，笔者还希望加入一些新的实用功能，例如自定义表格的筛选（Filter）和排序（Sort），以及表格能够允许用户自定义（Customize）要展示的列和调整列的顺序，等等。虽然 Element Plus 框架有排序和筛选功能，但笔者个人觉得太基础了，通常用户需要既简单又好用的 UI 组件。
下图是筛选表格的前端截图，比较类似 Excel 的展示和操作方式。
