伴隨着Vue的誕生，它似乎就被人寄予厚望，不僅僅是因為其輕量級的MVVM設計方式，而且其實現了組件化開發模式，所以越來越多的人會拿Vue和AngularJS、React Native做比較。具體關於它們的比較，我不做過多描述，使用哪個應該根據使用場景出發。
Vue.js
最近，因為有業務需要使用Vue去開發，所以我們需要自己封裝出Vue.js的各種常用組件。今天就給大家介紹一下我封裝Vue的icon組件的過程。當然這篇文章不是Vue.js，Webpack類的基礎教學課程，而是在大家有些基礎的情況下去看的。所以文章中只介紹了部分重點的代碼，以及代碼的截圖，如果有不大能看懂的地方可以先學下Vue和webpack的基礎。如果真的有需要可以在評論處評論，我可以出些Vue，Gulp，Webpack等基礎文章。
icon組件外觀
首先我們看一下icon組件運行出來后的模樣
icon組件
icon組件實現過程
-
項目搭建
icon組件實現后是一個可以直接使用的npm包，使用的是Yeoman構建工具，配和Gulp+Webpack，生成的工作目錄結構如下
目錄結構
（1）config文件夾下是webpack的配置文件
（2）src下是Vue組件的源文件
（3）example文件夾下是示例，剛看到的截圖就是example文件夾下的文件運行后的樣子
-
icon源文件編寫
項目結構生成好后，編寫icon組件的源文件就是最重要的了。
icon組件是一個.vue文件，其中包含template，style和script。
我實現的icon組件樣式是借助於ionicons，所以要借助於ionicons的樣式文件，因此會有以下的代碼
引入ionicons的樣式
然后考慮icon組件應該具備的幾項屬性，一個是樣式，利用type變量去控制；一個是顏色，利用color變量去控制；一個是大小，利用size變量去控制。所以template中有以下代碼
template代碼
在script中有以下代碼
script代碼
同時預先定義好icon組件大中小的幾個樣式，因此在style中會有以下代碼
style代碼
至此icon組件的源碼編寫就結束了，但並不是整個工程就結束了，需要對webpack進行設置，而這也是最重要的部分。
因為我們在icon組件的源碼中引入了ionicons的樣式，所以需要在webpack的配置文件中加入對css文件的解析loader，而css文件中又會引入woff，svg等文件，因此又要加入對這些文件的解析loader，如果不加入的對css，tff，svg等文件解析的話會報錯。
在webpack.base.js文件中加入以下代碼
webpack的配置
-
樣例的訪問
在源文件和webpack配置好后，就可以通過在example文件夾下寫demo了。
在demo.vue文件中，使用<icon>標簽即可訪問到自定義的icon組件
icon組件的例子
通過type，size，color三個參數來定義我們需要的icon組件的樣式，運行出來后的例子就如一開始運行出來的一樣，是不是很好看呢？
總結
Vue的組件還有很多，例如form表單類的，View視圖類，Navigation導航類等，都需要一個個去編寫，不過只要我們搞懂Vue的運行模式和Webpack的編譯模式就可以很方便的寫出來了。