伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS、React Native做比较。具体关于它们的比较,我不做过多描述,使用哪个应该根据使用场景出发。

如何快速的写出一个Vue的icon组件?这篇文章来教你

Vue.js

最近,因为有业务需要使用Vue去开发,所以我们需要自己封装出Vue.js的各种常用组件。今天就给大家介绍一下我封装Vue的icon组件的过程。当然这篇文章不是Vue.js,Webpack类的基础教学课程,而是在大家有些基础的情况下去看的。所以文章中只介绍了部分重点的代码,以及代码的截图,如果有不大能看懂的地方可以先学下Vue和webpack的基础。如果真的有需要可以在评论处评论,我可以出些Vue,Gulp,Webpack等基础文章。

icon组件外观

首先我们看一下icon组件运行出来后的模样

如何快速的写出一个Vue的icon组件?这篇文章来教你

icon组件

icon组件实现过程

  • 项目搭建

icon组件实现后是一个可以直接使用的npm包,使用的是Yeoman构建工具,配和Gulp+Webpack,生成的工作目录结构如下

如何快速的写出一个Vue的icon组件?这篇文章来教你

目录结构

(1)config文件夹下是webpack的配置文件

(2)src下是Vue组件的源文件

(3)example文件夹下是示例,刚看到的截图就是example文件夹下的文件运行后的样子

  • icon源文件编写

项目结构生成好后,编写icon组件的源文件就是最重要的了。

icon组件是一个.vue文件,其中包含template,style和script。

我实现的icon组件样式是借助于ionicons,所以要借助于ionicons的样式文件,因此会有以下的代码

如何快速的写出一个Vue的icon组件?这篇文章来教你

引入ionicons的样式

然后考虑icon组件应该具备的几项属性,一个是样式,利用type变量去控制;一个是颜色,利用color变量去控制;一个是大小,利用size变量去控制。所以template中有以下代码

如何快速的写出一个Vue的icon组件?这篇文章来教你

template代码

在script中有以下代码

如何快速的写出一个Vue的icon组件?这篇文章来教你

script代码

同时预先定义好icon组件大中小的几个样式,因此在style中会有以下代码

如何快速的写出一个Vue的icon组件?这篇文章来教你

style代码

至此icon组件的源码编写就结束了,但并不是整个工程就结束了,需要对webpack进行设置,而这也是最重要的部分。

因为我们在icon组件的源码中引入了ionicons的样式,所以需要在webpack的配置文件中加入对css文件的解析loader,而css文件中又会引入woff,svg等文件,因此又要加入对这些文件的解析loader,如果不加入的对css,tff,svg等文件解析的话会报错

在webpack.base.js文件中加入以下代码

如何快速的写出一个Vue的icon组件?这篇文章来教你

webpack的配置

  • 样例的访问

在源文件和webpack配置好后,就可以通过在example文件夹下写demo了。

在demo.vue文件中,使用<icon>标签即可访问到自定义的icon组件

如何快速的写出一个Vue的icon组件?这篇文章来教你

icon组件的例子

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

总结

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

Logo

前往低代码交流专区

更多推荐