從零開始構建本身的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組件源碼傳送門