伴随着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的编译模式就可以很方便的写出来了。