从零开始构建自己的vue组件库之——button篇

第一篇:从零开始构建自己的vue组件库之————button篇

写在前面

为什么做这个?这是一个很值得思考的问题:

= =首先目前vue.js成熟的框架已有很多,各种框架之间的特性、风格、完善度也参差不齐,有时候做项目选框架就成了一个难以抉择的问题,因为一个项目要经过很多版本的迭代、很多需求的变更和增加,有时候甚至是无限期的更新需求,那么假如一开始你选择了一个框架,随着需求的增多和UI设计风格的多样化,开源的框架不能满足大多数场景的需求是必然的,这时候就需要考虑自己去封装适合自己的甚至通用的组件了。

封装组件的步骤

  • 想好风格,确定将要用到的颜色、考虑组件的基本逻辑,组件之间的关联;
  • 准备好组件的可选项,也就是props这些选项等;
  • 设计组件调用的方式,如何暴露方法等。

button组件开始

先不用考虑发布之后的动作,将组件包和展示页面放在一个项目下即可

建立一个专门的文件夹存放我们的组件库,以下目录形式仅供参考:

packages

|__button

|__src   

    |__button.vue

|__index.js  

|__index.js (暴露所有组件)

button.vue

<template>
  <button
    :disabled="disabled"
    :class="[prefixCls,prefixCls +'__' + type,prefixCls +'__' + type + '--' + size,
    {'is-plain': plain, 'is-disabled': disabled, 'is-round': round}]"
  >
    <i v-if="icon !== ''" :class="icon"></i>
    <span :class="[prefixCls + '__loading',type]" v-if="loading"></span>
    <slot></slot>
  </button>
</template>
<script>
const prefixCls = 'wui__button';
export default{
  name: 'WButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'default'
    },
    icon: {
      type: String,
      default: ''
    },
    plain: Boolean,
    disabled: Boolean,
    round: Boolean,
    loading: Boolean
  },
  data () {
    return {
      prefixCls:prefixCls,
    }
  }
}
</script>

packages下的index.js

import WButton from './button/index.js';
const components = [
  WButton
]

const install = function(Vue) {
  if (install.installed) return
  components.map(component => Vue.component(component.name, component))
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  WButton
}

button下的index.js

import Button from './src/button.vue';

Button.install = function (Vue) {
  Vue.component(Button.name, Button);
};

export default Button;

main.js 引入方式

import WUI from '../packages/index'
Vue.use(WUI)

至此一个button组件就写好了,并且支持按需引用和全局引用方式,自由灵活,当然定制的参数也知识参考当前主流框架的形式,本篇只是一个框架的起点,相当于万里长征的第一步,存在着许多不足,希望各位看官指正。

下一篇

从零开始构建自己的vue组件库之————message组件

传送门

button组件源码传送门

    原文作者:vannvan
    原文地址: https://segmentfault.com/a/1190000019041312
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞