Element-UI 技术揭秘（1）- 前言

背景

若是你用 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 组件库的教材，若是你仅仅想知道如何使用，强烈建议去看官网文档。

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

适合人群

1. 正在以及想使用 element-ui 开发，前端开发经验 1 年+。

2. 熟悉 Vue.js 技术栈，使用它开发过几个实际项目。

3. 对原理技术感兴趣，想进阶和提高的同窗。

更新速度

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

写在最后

若是你以为这类文章有帮助，也欢迎把它推荐给你身边的小伙伴。

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

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