關於閱讀element-ui源碼的一些體會

element-ui 語義化作的太好了，命名與功能對應的很是貼切

針對某個具體的組件的源碼閱讀的建議：

• 先看element-ui官網對應的文檔；
• 對於.vue .js 引入的文件也須要理解;
• 在快速瀏覽一下組件的.vue文件，是本身對組件的基本結構有一個大體的瞭解；
• 在瀏覽一下.js文件，對事件多少有個影響；
• 在閱讀時，留心本身的疑問，但不要死磕某個點，有些問題在瞭解組件的大體構成後，會很天然的獲得答案；
• 在文檔上ctrl+F搜索看下,看文章時對照文檔，能夠得到更多信息，文章不是文檔不免省略一些文檔上的信息；

調試element-ui官網demo的兩種方式：

• 在官網的demo文檔點擊「在線運行」,能夠在線編輯；
• 推薦：下載源碼，將源碼在本地運行起來，將element-ui官網運行在本地，能夠直接修改examples/docs下的文檔demo,重要的是修改源碼可以直接反應在文檔的demo中，便於理解源碼；

npm install
npm run dev
複製代碼

以el-dialog組件爲例： 組件el-dialog的文檔demo，element\examples\docs\zh-CN\dialog.md 組件源碼：element-dev\packages\dialog\src\component.vue

最初的想法：

想閱讀Element-UI 各個組件的方式來提升本身對vue api和高階組件的掌握程度； 抽絲剝繭，逐漸深刻； 先從簡單的組件開始吧，佈局組件沒有任何事件；

初見交互複雜組件

在閱讀element-ui源碼的過程當中發現，在複雜的組件中類、函數、mixins、provide   inject、抽象的工具類均有使用，一個組件關聯的文件太多了，以我如今的文筆實在寫不清楚，只好暫時總結下在閱讀中發現的一些有趣的點，以自問自答的形式記錄下來；

熟悉了幾個複雜組件後

在看幾個了複雜組件後，對element-ui組件的基本組織結構有了大致上的認知，總算造成了有結構的文字；

PS：看了黃軼老師的element-ui技術解密，本身也試着理解element-ui，把軟件裏的筆記整理一下；

To Be Contuine

佈局組件el-col el-row

表單組件el-form el-form-item

全局組件message

管理彈窗組件的工具類Popup,結合組件el-dialg