記一次element-ui組件開發經歷

時間 2019-11-16

標籤一次 element 組件開發經歷欄目職業生涯简体版

原文原文鏈接

前言

從老東家離職後，閒着沒事，想到以前一個後臺管理系統的需求，當時須要一個圖片預覽的組件，可是工程中使用的element-ui並無這個組件，因而乎本身開始了這個組件的編寫。css

準備工做

首先將element-ui庫fork到本身的git倉庫，clone到本地。html

先看看element-ui的主要的工程目錄結構。vue

+-- build  工程腳手架配置文件
|
+-- examples 工程文檔目錄，也就是element-ui官網
|
+-- lib 執行打包後的文件
|
+-- packages 各個組件所在的目錄，也是接下來開發的重點
|
+-- src element-ui工程中各個公用文件，包含了入口文件
|
+-- test 測試用例文件目錄
|
+-- types typescript聲明文件目錄
複製代碼

在開發以前固然得須要知道他們團隊的開發規範啦，先看看element-ui貢獻指南。 node

瞭解了這些後，就能夠開始編碼了。webpack

開發步驟

準備環境

首先將npm的使用轉換爲yarn，安裝命令以下。c++

npm i yarn -g
複製代碼

使用yarn安裝工程依賴文件。git

yarn
複製代碼

生成目錄

到了這個步驟，準備工做基本完成，先看看上圖的組件開發規範，其中提到一點。github

經過 make new 建立組件目錄結構web

據個人瞭解，這個make命名呢，並非npm包提供的，這個工具的主要做用是給開發c++的人員提供便利的，windows平臺下安裝較爲麻煩，因此咱們直接看makefile文件。 typescript

能夠看見，執行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官方，每次都會有回覆，且效率很高。