Vue3全局组件统一插件化

封装全局组件

// 把components中的所组件都进行全局化注册
// 通过插件的方式
import ImageView from './ImageView/index.vue'
import Sku from './Sku/index.vue'
export const componentPlugin = {
  install (app) {
    // app.component('组件名字'，组件配置对象)
    app.component('ImageView', ImageView)
    app.component('Sku', Sku)
  }
}

注册全局组件

//main.js
// 引入全局组件插件
import { componentPlugin } from '@/components'
const app = createApp(App)
app.use(componentPlugin)

使用

<!-- 不需要引入可直接使用 -->
<template>
	<ImageView/>
</template>