對elementui整體設計分析-------引用

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，官方也提供了例子：

1. <!-- 引入樣式 -->

2. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

3. <!-- 引入組件庫 -->

4. <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 的組件庫的整體設計介紹完畢，可以看到除了這些豐富的組件背后，還有很完整的一套解決方案，很多經驗都值得我們學習和借鑒，不完美的地方也值得我們去思考，其中有很多技術細節可以深入挖掘。