在学习vue的时候，发现有很多使用vue开发的ui组件。本着学习的目的，自己也仿照写一些组件。
使用编写组件文档。
单元测试：karma+mocha+chai+sinon。
文档预览地址：预览链接
使用VuePress编辑文档的代码访问：组件文档
关于VuePress使用方法：博客园、掘金
完整代码：组件代码
接下来就是编写组件，首先以常用的组件Button为例。
通过props属性接收父组件传递过来的值，并对传递过来的值进行类型验证。
props:{ type:{ type: String, validator (value) { return [ 'primary', 'success', 'info', 'warning', 'danger' ].indexOf(value)>-1; } }, iconName:{ type:String }, iconSize:{ type:String, default:'small' }, iconPosition:{ type: String, default: 'left', validator(value){ return[ 'left', 'right' ].indexOf(value)>-1 } }, circle:{ type: Boolean }, disabled:{ type: Boolean } }通过 props接收父组件传递的值，可以实现各种功能不一样的button组件。
<template> <button @click="handleClick" :disabled="disabled" :class=buttonClass> <span :class=wrapperClass> <span v-if="iconName"> <vi-icon :viIconName="iconName" :viIconSize="iconSize"></vi-icon> </span> <span> <slot></slot> </span> </span> </button> </template> <script> export default { name: 'ViButton', props:{ type:{ type: String, validator (value) { return [ 'primary', 'success', 'info', 'warning', 'danger' ].indexOf(value)>-1; } }, iconName:{ type:String }, iconSize:{ type:String, default:'small' }, iconPosition:{ type: String, default: 'left', validator(value){ return[ 'left', 'right' ].indexOf(value)>-1 } }, circle:{ type: Boolean }, disabled:{ type: Boolean } }, methods: { handleClick(event) { this.$emit('click', event); } }, computed:{ buttonClass(){ return { [`vi-button-${this.type}`]:this.type, [`vi-button-disabled`]:this.disabled, [`vi-button-circle`]:this.circle } }, wrapperClass(){ return { [`vi-button-${this.iconPosition}`]:this.iconName&&this.iconPosition } } } } </script>完整代码请访问:组件代码