插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function
插件的功能范围没有严格的限制——一般有下面几种：
 1.添加全局方法或者 property。如：vue-custom-element
 2.添加全局资源：指令/过渡等。如：vue-touch）
 3.通过全局 mixin 来添加一些组件选项。(如vue-router)
 4.添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。
 5.一个库，提供自己的 API，同时提供上面提到的一个或多个功能

一、全局属性和方法

在main.js中

import { createApp } from 'vue'
import App from '@/App.vue'

const app = createApp(App)

//通过该方式注册全局属性和方法
app.config.globalProperties.$text = 'xxxx' 

app.mount('#app')

在组件中使用

import {getCurrentInstance } from 'vue'
// 从getCurrentInstance的proxy中解构出来
//  const { proxy: { $test}} = getCurrentInstance()
const { proxy} = getCurrentInstance()
proxy.$test

二、Vue3插件实现element-plus的消息提示

1.创建 modal.js

import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'

const $loading = (message, options = {}) => {
    return ElLoading.service({ text: message, lock: true, background: 'rgba(0, 0, 0, 0.5)', ...options })
}

const $tips = (message, options = {}) => {
    return ElMessage({ message: message, showClose: true, ...options })
}
const $success = (message, options = {}) => {
    return ElMessage({ message: message, type: 'success', showClose: true, ...options })
}
const $warn = (message, options = {}) => {
    return ElMessage({ message: message, type: 'warning', showClose: true, ...options })
}
const $error = (message, options = {}) => {
    return ElMessage({ message: message, type: 'error', showClose: true, ...options })
}
const $alert = (message, options = {}) => {
    options = { title: '', btn: '确定', confirm: () => {}, ...options }
    return ElMessageBox.alert(message, options.title, {
        confirmButtonText: options.btn,
        callback: () => {
            options.confirm()
        }
    })
}
const $confirm = (message, options = {}) => {
    options = { title: '', btn: '确定', btn_cancle: '取消', confirm: () => {}, cancle: () => {}, type: 'warning', ...options }
    return ElMessageBox.confirm(message, options.title, {
        confirmButtonText: options.btn,
        cancelButtonText: options.btn_cancle,
        type: options.type
    })
        .then(() => {
            options.confirm()
        })
        .catch(() => {
            options.cancle()
        })
}
//插件注册全局属性
//在组件中使用
// import {getCurrentInstance } from 'vue'
// const { proxy: { $success }} = getCurrentInstance()
// 从getCurrentInstance的proxy中解构出来
export default {
    install(app) {
        app.config.globalProperties.$loading = $loading
        app.config.globalProperties.$tips = $tips
        app.config.globalProperties.$success = $success
        app.config.globalProperties.$warn = $warn
        app.config.globalProperties.$error = $error
        app.config.globalProperties.$alert = $alert
        app.config.globalProperties.$confirm = $confirm
        //可以进行全局 app.provide  app.directive app.mixin
    }
}

2.在main.js中使用use

import { createApp } from 'vue'
import App from '@/App.vue'
import modal from '@/utils/modal'
const app = createApp(App)

app.use(modal)
app.mount('#app')