Vue.use()的使用(自己封装ui组件库)

1.Vue.use()的使用

首先在main.js导入自己的组件
import liUI from ‘./components/index’
Vue.use(liUI)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
// --------start导入自己的组件Ui----------
import liUI from './components/index'
Vue.use(liUI)
// --------end------------
Vue.use(Antd);
Vue.config.productionTip = false

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

2.要注册的组件—>记得在自己的ui组件中加上name属性,根据name来注册组件

例子

<template>
  <div>
      <button>按钮</button>
  </div>
</template>

<script>
export default {
	// 自己定义的组件名称
    name: 'HButton'
}
</script>

<style>
    button{
            width: 80px;
            height: 35px;
            border-radius: 5px;
            background-color: rgb(44, 174, 214);
            border: none;
            cursor: pointer;
        }
    button:hover{
        box-shadow: 1px 1px 5px #e2630e;
        background-color: #e2630e;
        color: #fff;
    }
</style>

3.注册并导入

最后在./components/index文件中导入并注册组件
在这里Vue会自动调用install()方法

// 导入自己的ui组件
import HButton from './button.vue';
import HInput from './input.vue'

const components = [
    HButton,
    HInput
]

const LiUi = {
    install(Vue){
    	// 循环注册组件
        components.forEach((item) => {
            Vue.component(item.name, item)
        })
    }
}
export default LiUi