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 技術揭祕》系列文章會第一時間在公衆號更新和發佈，除此以外，我還會常常分享一些前端進階知識，乾貨，也會偶爾分享一些軟素質技能，歡迎你們關注喔~