項目目錄：打開
github/ElemeFE/element
組件放在這里：
點擊packages文件夾：
Element 有多個版本，討論的是基于 Vue 的版本，所以每個組件就是一個 vue 文件，寫好一個 vue 組件，然后在需要的頁面引入即可。不過更重要的是要知道如何寫好一個組件（健壯，可擴展，易維護等考慮）。一個 vue 組件一般可分為三部分，template、script 和 style。在這里就不考慮 style 了，直接在頁面引用 Element 的樣式就好，只要知道 Element 的樣式一般是這樣（el-組件名--狀態(tài)，比如 el-button--primary）命名的就行。所以我們組件里是沒有寫 style 部分的，這樣做能幫我們省下好多時間和精力。
// 直接在頁面中引入 Element 的樣式
template 部分：
接下來先看看 template 的部分怎么寫。其實這部分是很簡單的，我們可以先打開 Element 文檔看一下 button 的外觀樣式，再來寫這部分，它大概長下面這樣：
?。ㄌ崾荆篍lement 組件一般最外層的樣式都是用 el-組件名 包起來的）
script 部分：
不管神馬組件，都有三個較為重要的組成部分：props、event 和 slot，這三個部分是組件對內對外溝通的橋梁，使得組件變得靈活起來。所以這三個 api 在發(fā)布之前一定構思好和確定好，因為后期再改就很難了，可能就是會牽一發(fā)動全身那樣子。
首先看下 props 的部分
button 組件的哪些內容是可變的？
1）最明顯的就是 button 的背景色，這顯然是可變的，就是 type；
2）然后是有沒有圖標，就是 icon；
3）還有就是有沒有禁用，就是 disabled；
4）再來是有沒有圓角，就是 round；
5）尺寸大小，就是 size；
....
試著寫一下 props 部分！（注意：props 的部分最好用對象的寫法，這樣能夠對每個屬性進行自定義設置，相比數(shù)組的寫法，更為規(guī)范嚴謹）。
slot 部分
插槽也是vue中很重要的內容的，匿名插槽，具名插槽，作用域插槽等都應該掌握。
很明顯，對于 button 組件來說，文本就是 slot 啦，所以 template 里面的內容可以小改一下，代碼如下：
event 部分
按鈕能有什么功能呢，就是點擊，所以就一個事件，當按鈕被點擊的時候，觸發(fā)一個事件向上傳遞，也就是 $emit。代碼如下：
在button組件中事件event是簡單了點，其他組件可能需要引入公共方法什么。。。。。。
再看 template 部分
你以為組件寫完了，并沒有， props 這部分的屬性都還沒用上呢， 比如 slot 部分吧，通過 $slots.default 我們可以獲取到 slot 中的內容，不過這里需要加個成教判斷，因為用戶可能沒有傳文字，那我們就不用渲染了； 又比如圖標 i 的部分，和 slot 一樣，有傳值我們才渲染，所以也加個判斷（這里 icon 的值為 el-icon-圖標名 格式）。
再看 props 中的屬性，其實當中大部分都是用來控制樣式變化的，比如 type，size，round，disabled，plain 等。。。所以為組件加上些 class 。
至此一個相對完整的 button 組件就分析完了，可以根據(jù)需要，不斷添加一些“用戶體驗”的東西......
歡迎關注
