478
自定義vue2.0全局組件（上篇）
隨著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方法創建組件模板。如下圖：
組件標簽名為“<g-button>”，轉義的html標簽名為“<button>”,默認具有的樣式class名為“g-button”。
進入入口文件index.js，引入button組件模板，生成名為“g-button”的vue組件並輸出。如下圖：
這樣一個普通的button組件就完成了。
現在，我們回到src目錄下，嚐試一下我們新編寫的組件。打開main.js和App.vue文件，引入並使用這個組件，如下圖：
main.js
App.vue
預覽結果：
這樣，一個可以複用的初級按鈕組件就完成了。上述代碼我已提交到github，歡迎參考！
當然，這個組件遠沒有達到完美，擴展性還不夠強大。下一篇，老K還會為大家繼續完善這個按鈕組件，敬請期待...
歡迎關注個人公眾號，查看更多好文。
最後更新：2017-06-15 13:31:40