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的编译模式就能够很方便的写出来了。