Vue中使用mixin做自己的UI组件库小结

我们都知道，Vue中的mixin可以将我们业务中的一些公共逻辑提取出去，在各个页面中或者组件中混入使用，可以极大地增强代码的复用性，下面简单总结一下如何使用mixin做一个自己的UI组件库。下面用一个示例来说明一下使用方法。

一、建立UI库的目录（目录结构自定义）

1.目录结构

目录结构

2.index.js文件代码示例

//导入各个具体UI组件
import myButton from './comps/my-button'
export default {
  components: {
    myButton
  }
}

3.my-button组件代码示例

<template>
  <button :class="['btn', btnStyle]"><slot></slot></button>
</template>

<script>
export default {
  props: {
    btnStyle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style>
.btn {
  width: 100px;
  height: 40px;
  color: #ffffff;
  border: none;
  border-radius: 6px;
}

.btn-primary {
  width: 200px;
  background: blue;
}
.btn-danger {
  width: 200px;
  background: red;
}

.btn-success {
  width: 200px;
  background: green;
}
</style>

二、在main.js中全局混入

import Vue from 'vue'
import App from './App.vue'
//导入UI混入文件
import myui from './lib/myui/index'
//全局混入
Vue.mixin(myui)

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App)
}).$mount('#app')

三、使用UI库

<template>
  <div id="app">
    <my-button btn-style="btn-success">成功</my-button>
    <my-button btn-style="btn-danger">危险</my-button>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

四、效果图

效果图

五、参考

Vue的mixin混入做UI组件库