背景

如果你用 Vue 技术栈开发 PC 的 to B 业务，那么对 element-ui 一定不会陌生，我目前在 Zoom 工作，fork 了一份 element-ui 的源码做二次开发，对 element-ui 的源码也有了一定的研究。由于自研组件库并不是开源的，所以我也不能把它的技术细节分享出来，但是对于 element-ui，它本身是开源的，并且大部分人还是会直接使用它，为了让大家能够熟悉 element-ui 的原理，少踩坑，少加班，我打算写系列文章对 element-ui 的实现抽丝剥茧，分析组件库的实现细节。

相信经过系统的学习后，你不仅可以对它的实现了如执掌，还能学习到很多复杂组件的实现思路，提升自己的技术能力，甚至也能自己手撸一个大型组件库。

系列文章设计

我首先会写一篇文章整体介绍组件库的设计，接着以组件为粒度，去写每一篇文章，遇到复杂的组件，可能会写多篇文章。

对于每一个组件，我会首先分析组件的作用、使用方法，设计思路，然后再去分析它的实现细节和原理，不仅会包括 JS 部分，也包括它的布局和 CSS 部分，这里面也会融入一些我的思考。

element-ui本身也依赖了很多优秀的第三方库，我在分析组件的过程中如遇到依赖的第三方库，也会整理出单独的文章分享。

由于 element 官方也在维护组件库，代码可能会更新，因此文中的代码难免会与最新源码有出入，所以我会写每个组件的时候贴上对应的版本号，未来如果某些组件的分析文章与源码如果出入过大，则会更新对应的文章。

如何学习

对于这类系列文章，顺序学习自然是最好的，如果你对某个组件感兴趣，也可以直接看到相应的文章。

我了解很多人看微信公众号的文章都是利用碎片化时间，对于快餐类的文章是没有问题的，但是如果你想深入学习到技术，我建议你还是 clone 一份 element-ui 的源码，坐在电脑前对照学习。

本文并不是如何使用 element-ui 组件库的教材，如果你仅仅想知道如何使用，强烈建议去看官网文档。

学习过程中可能会遇到一些问题，欢迎在文章下留言。

适合人群

正在以及想使用 element-ui 开发，前端开发经验 1 年+。
熟悉 Vue.js 技术栈，使用它开发过几个实际项目。
对原理技术感兴趣，想进阶和提升的同学。

更新速度

保持每周更新 1-2 篇文章的节奏。

写在最后

如果你觉得这类文章有帮助，也欢迎把它推荐给你身边的小伙伴。

下一篇预告：Element-UI 技术揭秘（2）— 组件库的整体设计。

另外，我最近刚开了公众号「老黄的前端私房菜」，《Element-UI 技术揭秘》系列文章会第一时间在公众号更新和发布，除此之外，我还会经常分享一些前端进阶知识，干货，也会偶尔分享一些软素质技能，欢迎大家关注喔~