vue3---自定义插件注册全局对象

① 在src/components文件夹下创建SvgIcon组件

② 在src/components文件夹下创建index.ts：用于注册components文件夹下全部的全局组件

// 引入项目中的全部全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'

// 定义全局组件对象：用于存放所有要引入的全局组件
const allGlobalComponents: any = {
    SvgIcon,
    Pagination
}

// 对外暴露一个插件对象
export default {
    install(app: any) {
        // 遍历注册全局组件对象中的所有组件
        Object.keys(allGlobalComponents).forEach(keys => {
            app.component(keys, allGlobalComponents[keys])
        })
    }
}

③在入口文件（通常是main.ts）引入步骤②的index.ts文件，通过app.use方法安装自定义插件

// 引入自定义插件对象：注册全局组件
import globalComponent from '@/components/index.ts'
// 安装自定义插件，使用该方法就会调用自定义插件对象文件中的install方法，从而进行全局组件注册
app.use(globalComponent)