怎么使用vue写个自己的组件库

本人用vue写了X年的业务了，用了不少的组件库，也成想过自己来实现一个，一直推到现在，我们用过无数的轮子，宝马的，奔驰的，奥迪的，但是老板就要玛莎的，轮子是有限的，业务时无限的。

从零开始 一步步实现自己的组件库，以后可以不断完善，拿来即用

• 需要与众不同 包含自己的特色

我们先从一个最简单的button开始

大致的项目结构

package              # 组件包
--button             # 组件文件夹
--|--button.vue      # button组件
--|--button.less     # 样式文件
--|--index.js        # 组件的出口
--style.less         # 公用的 css 样式文件
--index.js           # 组件库的出口

src/package/button/button.vue

<template>
  <div>
    button
  </div>
</template>

<script>
  export default {
    // 这是该组件的自定义名称，
    // 之后引用组件时就会用到这个名称。
    name: 'i-button'
  }
</script>

src/package/button/index.js

// 引用 scss 文件和组件
import './button.less'
import Button from './button.vue'

// 导出组件
export default Button

src/package/index.js

// 1.引入组件
import Button from './button'

// 2.挂载组件对象
const components = {
  Button
}

// 3.注册组件
const install = function(Vue, Option = {}) {
  // 4.已经注册的返回
  if (install.installed) return
  // 5.循环注册组件
  Object.keys(components).forEach((key) => {
    Vue.component(components[key].name, components[key])
  })
}

// 6.导出库
export default {
  install
}

src/main.js

import Ivue from './package'
Vue.use(Ivue)

任意组件使用

<template>
  <div>
    <i-button></i-button>
  </div>
</template>