vue如何使用mixin做UI库

什么是mixin

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

比如，UI组件就是一个很有代表性的可复用的组件，所以今天就写一个mixin做的button组件。

项目开始

比如说我要在App.vue中使用一个button按钮。为了项目整体同一，并且高复用，就需要把button抽离成一个组件。

/src/App.vue

可以使用mixin，将button组件引入即可

/src/App.vue

那么问题来了，这里面的myUI是什么呢，如何编写button组件呢

vue规定，一个混入对象可以包含任意组件选项。比如data ,hooks, methods ,components等等。

这里我们就是需要components这个属性 ， 将写好的button组件放在components中，这样mixin注入的时候，components属性会自动挂载到vue实例中去。

/src/lib/index.js

如何编写button组件：

<template>
//使用插槽将button的内容插进来
//用props也可以，但是我觉得用插槽语义更明确，使用时也更符合日常写法

//类可以用数组罗列，my-btn是初始化类名必须要有
//btnStyle是传进来的属性 用法类似于bootstrap
    <button v-bind:class="['my-btn',btnStyle]"><slot></slot></button>
</template>

<script>

export default {
  name: 'MyBtn',
  props:{btnStyle:String},
}
</script>

<style>
 .my-btn{
   height: 36px;
   /* width: 60px; */
   background-color: #fff;
   border: 1px solid black;
 }
 .my-btn.btn-primary{
   background-color: skyblue;
 }
 .my-btn.btn-danger{
   background-color: red;
 }
 .my-btn.btn-warning{
   background-color: gold;
 }
</style>

整体的项目架构

myUI文件放的都是UI组件，然后配置到/libs/index.js中的components中去。

小技巧

如果项目大量的用到了ui组件，显然，每个vue组件里面都配置是很麻烦的。
所以可以在main.js中配置，这样所有的vue组件都不需要在配置了

引入mixin对象，再用Vue.mixin()使用即可