VUE -- 如何快速的寫出一個Vue的icon組件？

伴隨着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的編譯模式就能夠很方便的寫出來了。