vue中创建全局UI组件，以插件的方式

1. 封装UI样式组件
2. 封装插件

vue2中封装插件的方法

• 给自定义的组件添加 install 方法

        创建一个js文件 如下

// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展

imoprt 组件名 from '组件路径.vue'

export default {
    install (Vue) {
        Vue.component('插件名', 组件名)
    }
}

• 在main.js中引用

//导入全局组件
import 插件名 from '插件路径.js'
// 使用组件
Vue.use(插件名)

Vue3中封装全局插件的方法

• vue3与vue2 的不同在于，install函数中传入的不是 Vue构造函数，而是在main.js中创建的app实例对象

//  vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展
// 插件的本质就是个对象

imoprt 组件名 from '组件路径.vue'

export default {
    install (app) {
        app.component('插件名', 组件名)
    }
}

• 在main.js中引用

// 插件的使用，在main.js使用app.use(插件)
import 插件名 from '插件路径.js'
createApp(App).use(store).use(router).use(插件名).mount('#app')

 

之后在页面中使用时，无需再引入，直接将全局插件名当标签使用即可