我們在系統地學習如何開發前端的SPA項目時，在搭建完腳手架之后，不得不繞開的一個框架那就是UI庫。UI庫是一套集成的前端頁面UI組件，可以幫助開發者更好地搭建美觀的網站，縮短開發周期。我最近花了很長時間整理了Element-ui庫的源碼架構細節，下面通過這篇長文分段分享給大家
系統架構
我們首先從README.md這個markdown文檔中：
README.md
可以得出：element-ui的最終形式就是一個外部的新Vue組件，可以添加集成到Vue主組件中，element-ui這個組件內部也包含着很多的Vue組件，例如Select、Button等等。
-
主入口文件：./src/index.js，此入口文件繼承了所有element-ui的組件，並為原型提供了一部分創建組件的捷徑方法，也是webpack打包的入口文件。
-
外部方法：./src/utils/…，此文件夾包含了element-ui庫的大部分外部方法，用於優化，便捷一些核心組件內部的業務邏輯。
-
額外的外部方法：./src/mixins/…，此文件夾包含了element-ui庫的一些外部方法。
-
交互操作方法：./src/directives/…，此文件夾包含了交互操作所規定的一些方法。
-
核心業務組件：./packages/…，此文件夾包含了element-ui所提供的API的核心代碼實現，也是element-ui庫的關鍵。
我們下面講解element-ui庫代碼就從上面的五個大模塊入手，簡要地解析這個element-ui的源碼是如何一步一步地實現整個ui庫框架的。
主入口文件
此入口文件繼承了所有element-ui的組件，並為原型提供了一部分創建組件的捷徑方法，也是webpack打包的入口文件。
./src/index.js
主入口文件
我們可以看到主入口文件對packages核心組件的大量引入，我們可以把主入口文件看作是一個組件產品的集成體，為開發者的實際項目提供服務。下面就通過主入口文件來對packages的核心組件進行分析，然后通過packages核心組件中的外部方法，來尋找相應的方法，在進行分析。
核心業務組件
核心業務組件位於 /src/packages/ 文件夾中。是整個element-ui庫的核心，提供了大量的組件服務給開發者。我們從使用ui庫常見的一個組件el-button開始，來先初步地了解ui庫內部的核心組件是如何工作的。
./packages/button/index.js
./packages/button/src/button.vue
button.vue
./packages/button/src/button-group.vue
button-group.vue
我們從el-button組件的入口文件index.js中可以發現，el-button用於展現button按鈕的組件來源於src文件夾，使用了install方法，來使開發者開發實際項目中可以使用Vue.use()來進行全局注冊。
我們再來看button.vue文件，這是一個很典型的vue單文件組件。規定了用用戶該擁有的所有屬性，以及內部的span字段，封裝了click方法。
其中還有一個特別值得關注的點就是：在script中，使用了inject方法。在Vue框架中，包含這些組合關系，常見的例子有this.$parents為Vue實例訪問其父實例。Vue提供了provide/inject，主要在開發高階插件/組件庫這一類復雜項目中使用，一般情況下，普通項目是不會用到的，這對選項（provide/inject）一起使用，使得祖先組件可以對其后代組件注入依賴。
-
provide：> Object | () => Object
-
inject: > Array | {[key:string]:string | Symbol | Object}
上面給出了所可能情況下的數據類型，provide返回的應該是一個對象或者一個對象返回的函數，該對象包含着組件注入后代組件的屬性，無論層次有多深始終生效。
inject則是一個字符串數組或者一個對象，對象的key是本地的綁定名在可用的注入內容中搜索用的 key (字符串或 Symbol)，或一個對象。我們的el-button例子中就繼承了el-form和el-formitem的所有provide內容。