1.需求分析
豐富的 feature：豐富的元件，自定義主題，國際化。
文檔 & demo：提供友好的文檔和 demo，維護成本小，支援多語言。
安裝 & 引入：支援 npm 方式和 cdn 方式，并支援按需引入。
工程化：開發，測試，建構，部署，持續內建。
豐富的 feature
豐富的元件
元件庫最核心的還是元件，先來看一下 element-ui 元件的設計原則：一緻、回報、效率、可控。具體的解釋在官網有，我就不多貼了，在 element-ui 開發團隊背後，有一個強大的設計團隊，這也得益于 element-ui 的創始人 sofish 在公司的話語權和地位，争取到這麼好的資源。是以 element-ui 元件的外型、配色、互動都做的非常不錯。
作為一個基礎元件庫，還有一個很重要的方面就是元件種類豐富。element-ui 官方目前有 55 個元件，分成了 6 大類，分别是基礎元件、表單類元件、資料類元件、提示類元件、導航類元件和其它類型元件。這些豐富的基礎元件能很好地滿足大部分 PC 端 to B 業務開發需求。
開發這麼多元件，需要大量的時間和精力，是以這裡要非常感謝 element-ui 團隊，為我們提供了這些基礎元件，我們基于它們做二次開發，節約了非常多的時間。
element-ui 的元件源碼在 packages 目錄裡維護，而并不在 src 目錄中。這麼做并不是為了要采用 monorepo，我也并沒有找到 lerna 包管理工具，這麼做的目的我猜測是為了讓每個元件可以單獨打包，支援按需引入。但實際上想達到這個目的也并不一定需要這麼去組織維護代碼，我更推薦把元件庫中的元件代碼放在 src/components 目錄中維護，然後通過修改 webpack 配置腳本也可以做到每個元件單獨打包以及支援按需引入，源碼放在 src 目錄總是更合理的。
自定義主題
element-ui 的一大特色是支援自定義主題，你可以使用線上主題編輯器，可以修改定制 Element 所有全局群組件的 Design Tokens，并可以友善地實時預覽樣式改變後的視覺。同時它還可以基于新的定制樣式生成完整的樣式檔案包，供直接下載下傳使用，那麼它是如何做到這點的呢？
element-ui 元件的樣式、公共樣式都在 packages/theme-chalk 檔案中，并且它是可以獨立釋出的。element-ui 元件樣式中的顔色、字型、線條等等樣式都是通過變量的方式引入的，在 packages/theme-chalk/src/common/var.scss 中我們可以看到這些變量的定義，這樣就給做多主題提供了友善，因為我隻要修改這些變量，就可以實作元件的主題改變。
了解了基本原理，做線上替換主題也并不是難事了，我并不會詳細去講線上定制主題前端互動部分，感興趣的同學可以自己去看源碼，都在 examples 目錄中，我這裡隻說一下本質的原理。
想要做到線上換膚，并且實時預覽，需要借助 server 的幫助，比如主題可以通過一個配置去維護，使用者做一系列操作後，會生成新的主題配置，把這個配置通過接口送出的方式告訴 server，然後 server 會根據這個配置做傳回生成新的 CSS（具體的實施的方案未開源，大緻會做一些變量替換，然後編譯），新的 CSS 的樣式就會覆寫預設的樣式，達到了切換主題的目的。
安裝&引入
實際上 element-ui 會把所有元件打包生成一份 CSS 和 JS，官方也提供了例子：
-
<!-- 引入樣式 -->
-
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-
<!-- 引入元件庫 -->
-
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
工程化
前端對于工程化的要求越來越高，element-ui 作為一個元件庫，它在工程化方面做了哪些事情呢？
首先是開發階段，為了保證大家代碼風格的一緻性，使用了 ESLint，甚至專門寫了 eslint-config-elemefe 作為 ESint 的擴充規則配置；為了友善本地開發調試，借助了 webpack 并配置了 Hot Reload；利用子產品化開發的思想把元件依賴的一些公共子產品放在了 src 目錄，并依據功能拆分出 directives、locale、mixins、transitions、utils 等子產品。
其次是測試方面，使用了 karma 測試架構，為每一個元件編寫了單元測試，并且利用 Travis CI 內建了測試。
接着是建構方面，element-ui 編寫了很多 npm scripts，以 dist 這個 script 為例：
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"
它内部會依次執行多個指令，最終會生成 lib 目錄和打包後的檔案。我并不打算介紹所有的指令，感興趣同學可自行研究，這裡我想介紹一下 build:file 這個 script 做的事情：
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
這裡會依次執行 build/bin 目錄下的一些 Node 腳本，對 icon、entry、i18n、version 等做了一系列的初始化工作，它們的内容都是根據一些規則做檔案的 IO，這麼做的好處就是完全通過工具的手段自動化生成檔案，比人工靠譜且效率更高，這波操作非常值得我們學習和應用。
最後是部署，通過 pub 這個 npm script 完成：
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh"
主要是通過運作一系列的 bash 腳本，實作了代碼的送出、合并、版本管理、npm 釋出、官網釋出等，讓整個釋出流程自動化完成，腳本具體内容感興趣的同學可自行檢視
總結
至此，element-ui 的元件庫的整體設計介紹完畢，可以看到除了這些豐富的元件背後，還有很完整的一套解決方案，很多經驗都值得我們學習和借鑒，不完美的地方也值得我們去思考，其中有很多技術細節可以深入挖掘。
