【更新】自定义vue组件库

现在的 Vue 在国内火热，自然生态还是很丰富的，各种组件库满大街都是，总有一款是比较符合项目的。
但是，怎么才能写点自己的组件库呢，就当搭建项目时的基础库用。
好吧，这是预告：

案例地址：https://zhuss.oss-cn-shanghai.aliyuncs.com

vue-cli 创建一个全新的 vue 项目，在 components 文件夹下新建一个文件夹用来存放我们的组件，比如我新建一个 zss-components 文件夹，然后在内部新建一个 index.js 文件用来导出我们的组件。

开始写我们的第一个自定义组件 zss-button 按钮，在刚刚的components 文件夹下新建一个 zss-button 文件夹，然后新建一个 ZssButton.vue 文件。

// ZssButton.vue

<template>
  <button class="zss-button" @click="handleClick">
    <slot></slot>
 </button>
</template>
<script>
export default {
  name:'zss-button',
  methods:{
    handleClick(event){
      this.$emit('click',event);
    }
  }
}
</script>
<style scoped>
.zss-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #bfcbd9;
    border-color: #c4c4c4;
    color: #1f2d3d;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 15px;
    font-size: 14px;
}
.zss-button+.zss-button{
  margin-left: 10px;
}
</style>

这样就有了一个自定义的button组件了，我们还需要在刚刚的index文件中导出这个 button 组件

//components/zss-components/index.js

import Button from './ingtube-button/IngtubeButton.vue'

export default {
    install(Vue,options){
        Vue.component(Button.name,Button);
    }
}

然后我们就可以在man.js中像其他组件一样使用我们的自定义组件了。

//main.js

import  ZssUI from './components/zss-components'

Vue.use(ZssUI)

//然后在项目中使用
<template>
  <div>
        <zss-button>自定按钮</zss-button>
  </div>
</template>

好了，这样就可以，是不是很简单。