如何快速的写出一个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组件的例子

通过type，size，color三个参数来定义我们需要的icon组件的样式，运行出来后的例子就如一开始运行出来的一样，是不是很好看呢？

总结

Vue的组件还有很多，例如form表单类的，View视图类，Navigation导航类等，都需要一个个去编写，不过只要我们搞懂Vue的运行模式和Webpack的编译模式就可以很方便的写出来了。