1.需求分析css
豐富的 feature：豐富的組件，自定義主題，國際化。前端
文檔 & demo：提供友好的文檔和 demo，維護成本小，支持多語言。node
安裝 & 引入：支持 npm 方式和 cdn 方式，並支持按需引入。webpack
工程化：開發，測試，構建，部署，持續集成。git
豐富的 feature
豐富的組件
組件庫最核心的仍是組件，先來看一下 element-ui 組件的設計原則：一致、反饋、效率、可控。具體的解釋在官網有，我就很少貼了，在 element-ui 開發團隊背後，有一個強大的設計團隊，這也得益於 element-ui 的創始人 sofish 在公司的話語權和地位，爭取到這麼好的資源。因此 element-ui 組件的外型、配色、交互都作的很是不錯。web
做爲一個基礎組件庫，還有一個很重要的方面就是組件種類豐富。element-ui 官方目前有 55 個組件，分紅了 6 大類，分別是基礎組件、表單類組件、數據類組件、提示類組件、導航類組件和其它類型組件。這些豐富的基礎組件能很好地知足大部分 PC 端 to B 業務開發需求。npm
開發這麼多組件，須要大量的時間和精力，因此這裏要很是感謝 element-ui 團隊，爲咱們提供了這些基礎組件，咱們基於它們作二次開發，節約了很是多的時間。element-ui
element-ui 的組件源碼在 packages 目錄裏維護，而並不在 src 目錄中。這麼作並非爲了要採用 monorepo，我也並無找到 lerna 包管理工具，這麼作的目的我猜想是爲了讓每一個組件能夠單獨打包，支持按需引入。但實際上想達到這個目的也並不必定須要這麼去組織維護代碼，我更推薦把組件庫中的組件代碼放在 src/components 目錄中維護，而後經過修改 webpack 配置腳本也能夠作到每一個組件單獨打包以及支持按需引入，源碼放在 src 目錄老是更合理的。bootstrap
自定義主題
element-ui 的一大特點是支持自定義主題，你可使用在線主題編輯器，能夠修改定製 Element 全部全局和組件的 Design Tokens，並能夠方便地實時預覽樣式改變後的視覺。同時它還能夠基於新的定製樣式生成完整的樣式文件包，供直接下載使用，那麼它是如何作到這點的呢？bash
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 的組件庫的總體設計介紹完畢，能夠看到除了這些豐富的組件背後，還有很完整的一套解決方案，不少經驗都值得咱們學習和借鑑，不完美的地方也值得咱們去思考，其中有不少技術細節能夠深刻挖掘。