Vue 全局组件插件化

背景

当有多个组件需要被多次复用时，每次 import 会很麻烦，我们可以对该组件实现插件化

实现

向 index.js 创建插件 componentPlugin ，并导出

// component中所有组件进行全局化注册，以插件方式，导出
import ImageView from '@/components/ImageView/index.vue'
import Sku from '@/components/XtxSku/index.vue'

export const componentPlugin = {
    install (app) {
        // 为组件标签命名
        app.component('XtxImageView', ImageView)
        app.component('XtxSku', Sku)
    }
}

随后在 main.js 中引入 componentPlugin 插件并安装

import { componentPlugin } from '@/components'
app.use(componentPlugin)