前言
從老東家離職後，閒著沒事，想到之前一個後臺管理系統的需求，當時需要一個圖片預覽的元件，但是工程中使用的element-ui並沒有這個元件，於是乎自己開始了這個元件的編寫。
準備工作
首先將element-ui庫fork到自己的git倉庫，clone到本地。
先看看element-ui的主要的工程目錄結構。
+-- build 工程腳手架配置檔案
|
+-- examples 工程文件目錄，也就是element-ui官網
|
+-- lib 執行打包後的檔案
|
+-- packages 各個元件所在的目錄，也是接下來開發的重點
|
+-- src element-ui工程中各個公用檔案，包含了入口檔案
|
+-- test 測試用例檔案目錄
|
+-- types typescript宣告檔案目錄
複製程式碼在開發之前當然得需要知道他們團隊的開發規範啦，先看看element-ui貢獻指南。
瞭解了這些後，就可以開始編碼了。
開發步驟
準備環境
首先將npm的使用轉換為yarn，安裝命令如下。
npm i yarn -g
複製程式碼使用yarn安裝工程依賴檔案。
yarn
複製程式碼生成目錄
到了這個步驟，準備工作基本完成，先看看上圖的元件開發規範，其中提到一點。
通過 make new 建立元件目錄結構
據我的瞭解，這個make命名呢，並不是npm包提供的，這個工具的主要作用是給開發c++的人員提供便利的，windows平臺下安裝較為麻煩，所以我們直接看makefile檔案。
可以看見，執行make new 的時候呢，又執行了node命令，相當於間接的執行了node命令，那麼我們可以跳過make的安裝，直接使用相應的命令，node命令如下。
node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
複製程式碼我們們先看看執行的這個new.js做了啥。
通過這兩行程式碼可以得知，需要通過命令列傳入兩個引數，第一個引數是元件的英文名，第二個引數是元件的中文名，使用如下命令就可以建立我們需要的檔案。
node build/bin/new.js test-component '測試元件'
複製程式碼看看發生了什麼
自動建立瞭如下檔案，也就是你需要完善的程式碼，既然是編寫元件，當然得能夠在開發時同時預覽以及debug，所以這時候就需要做如下步驟，先檢視package.json，看看提供了那些script命令。
執行專案
通過分析命令可以得知，開發環境下，需要執行dev命令，待工程執行後，開啟瀏覽器，進入http://127.0.0.1:8085即可預覽專案。
npm run dev
複製程式碼編寫程式碼
這時，在元件列表頁就能夠看到你新建立的元件了，那麼該如何編寫這個頁面呢，答案就在自動建立的md檔案中，開啟element/examples/docs/zh-CN/test-component.md檔案，在這裡進行編輯，就能看見網頁上的變化了，這裡拿我之前編寫的元件舉例。
其中內容分為三大部分
- 可執行的指令碼檔案，圖片上部用script指令碼包裹的部分
- demo檔案，圖片中部用```html包裹的部分，其中template包裹的程式碼最終會被渲染至頁面上，而script部分僅僅只是文字示例，並不會執行，執行的是圖片上部的script指令碼
- 引數選項說明，位於圖片下部
當然也可以編寫style程式碼，用於改變元件渲染後在頁面展現的樣式
瞭解了這一步驟，就可以開始業務程式碼的編寫了，開啟element/packages/test-component/src/main.vue，這個是業務邏輯所在的檔案，這篇文章的重點不是教你如何編碼，而是理解element-ui的開發流程，所以這裡不詳細講解程式碼，之前我開發的完整程式碼可以點選這裡檢視，其中包含了js程式碼、css程式碼、測試用例、以及typescript宣告檔案。
測試用例
一個完善的工程，當然少不了測試用例，在我看來，單元測試的意義在於，測試好當前你開發的業務邏輯，以便於日後工程維護時，能及時發現錯誤，減少維護成本。element-ui使用的是mocha測試框架以及chai斷言庫, 因為工程已經搭建好，所以對於開發人員的學習成本很低，只需要學習chai斷言庫的使用就好，關於chai斷言庫的使用，看這裡, 這裡不教你如何編寫測試用例，具體需要測試哪些功能，相信你看了element-ui其他元件的測試用例，自己也能夠領悟到的。
typescript宣告檔案
因為並不是很懂typescript，所以經過短暫的學習ts，大致瞭解到，ts宣告檔案的作用是，為不是ts編寫的庫，提供一個庫中的開放的api的型別宣告，主要的做用應該是為了編輯器能夠理解庫中開放的api，提供一個智慧提示的作用，如有不對，還請指出。
所以你需要做的是，將你編寫的元件中，動態傳入的引數以及開放的api編寫一個型別宣告，大致的寫法如下圖
可以看見，每個函式對於傳入的引數以及返回的型別進行了一個型別宣告。
PR程式碼
到了這一步，程式碼基本上已經編寫完成，通過測試以及編譯後，就可以合併提交了，如果多次commit，得先用git rebase命令，將多次commit合併成一次，在貢獻指南上也會看見這一提示，合併完成後先提交到自己的github倉庫，然後提交pull request，之後會得到官方的回覆，這裡得贊下elm官方，每次都會有回覆，且效率很高。
被殘忍拒絕(〒︿〒)，所以當你決心要開發element-ui的元件前，先思考思考，element-ui有什麼是目前沒有，但是需要的元件。
結束語
雖然這次編寫的元件並沒有被官方採納，但是通過這次元件的編寫，學習到了很多知識，所以騷年，放手去做吧
更新
模仿element ui 搭建了一套vue元件開發webpack配置，可以在此基礎上封裝自己需要的功能