隨著vue.js的發展，一些基於vue.js的框架如雨後春筍般出現在開發者面前（例如：Element-ui、Mint-ui）。但是，無論哪一種框架都不可能完全滿足項目需求，有時需要開發者自己編寫自定義組件。那怎樣編寫自定義組件呢？今天，老K為大家分享一下自己常用的方法。
按鈕是經常使用的組件之一。Element-ui中的按鈕組件說明，如下圖：
今天，我們就拿這個按鈕組件為例為大家編寫一個自己的按鈕組件。
前期準備：node.js開發環境，npm包管理器或者cnpm包管理器（推薦cnpm，速度快）。
首先，打開命令行窗口，用腳手架工具vue-cli搭建一個vue2.0開發環境。我們選擇搭建一個webpack-simple並放到custom-global-component目錄裡。如下圖：
按步驟依次完成環境搭建。然後進入custom-global-component文件裡，輸入命令cnpm init完成依賴包的安裝，然後輸入命令npm run dev,啟動測試環境。如下圖：
如果一切順利，會出現vue.js經典的歡迎頁。如下圖：
然後進入custom-global-component/src目錄裡，打開App.vue，為了便於測試，將多餘代碼刪掉。如下圖：
代碼刪掉後，寫上本次的主題名稱。如下圖：
測試頁面同時會自動更新，如下圖：
在custom-global-component/src目錄裡，新建components目錄，用來放組件文件。如下圖：
進入components目錄，新建button目錄。這就是我們今天做的button組件的所在位置。如下圖：
進入button目錄裡，新建入口文件index.js、組件文件Button.vue，如下圖：
打開Button.vue，為了是我們的組件具有良好的可擴展性，我們採用vue.js的render方法創建組件模板。如下圖：
組件標籤名為“
進入入口文件index.js，引入button組件模板，生成名為“g-button”的vue組件並輸出。如下圖：
這樣一個普通的button組件就完成了。
現在，我們回到src目錄下，嘗試一下我們新編寫的組件。打開main.js和App.vue文件，引入並使用這個組件，如下圖：
main.js
App.vue
預覽結果：
這樣，一個可以複用的初級按鈕組件就完成了。上述代碼我已提交到github，歡迎參考！
代碼地址：
https://github.com/gaofei019/vue2.0-custom-global-component.git
當然，這個組件遠沒有達到完美，擴展性還不夠強大。在下篇中，老K還會為大家繼續完善這個按鈕組件，敬請期待...
本文為原創內容，若轉載請註明出處，轉發感激不盡。