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