Vue3 插件封装

实际开发项目的时候，有些组件需要再项目的很多地方调用，比如弹框、loading组件，这个时候我们可以封装一个全局插件，然后直接在项目的入口文件（main.js或main.ts）中进行引入、注册，就可以在项目的各个地方使用了。

创建全局插件

创建一个 vuePlugin 文件夹，在该文件夹下创建一个 index.vue 文件和一个 index.ts 文件

index.vue 主要用来编写插件的结构、样式和逻辑，并通过 defineExpose() 方法将插件的属性、方法暴露出去，如下：

<template>
    <div v-if="isShow">我是一个Vue全局插件</div>
</template> 
<script setup lang="ts">
    import { ref } from "vue";
    const isShow=ref(false)
    const show=()=>isShow.value=true
    const hide=()=>isShow.value=false
    // defineExpose() 方法用来暴露组件的方法和属性，以便可以被外部访问
    defineExpose({
        isShow,
        show,
        hide
    })
</script>

index.ts 主要编写插件的安装、挂载逻辑，并将插件暴露出去，如下：

import { createVNode,render } from "vue";
import type {App,VNode} from 'vue'
import VuePlugin from "./index.vue";
export default {
    install(app:App){
        //将组件对象转成虚拟 dom 节点
        const vNode:VNode=createVNode(VuePlugin) 
        //通过 render() 方法将虚拟节点挂载到 body 身上，以便可以全局访问
        render(vNode,document.body) 
        // 通过 app.config.globalProperties 将 vuePlugin 组件的方法挂载到全局
        app.config.globalProperties.$vuePlugin={
            show:()=>vNode.component?.exposed?.show(),
            hide:()=>vNode.component?.exposed?.hide()
        }
    }
}

注册全局插件

在入口文件 main.ts 中引入并注册上面封装的插件，如下：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import VuePlugin from './components/VuePlugin' //引入 VuePlugin 插件
const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(VuePlugin) //app.use()方法用来注册插件

app.mount('#app')

// 如下定义了 VuePlugin 插件的相关类型及声明文件，防止报错
type Vplugin={
    show:()=>void,
    hide:()=>void
}
declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        $vuePlugin : Vplugin
    }
}

插件使用

在组件中直接使用插件，如下：

<script setup lang="ts">
import {getCurrentInstance} from 'vue'
const app=getCurrentInstance() //获取组件实例
app?.proxy?.$vuePlugin.show() //使用插件
</script>

<template>
  <div>我是页面中的一个组件</div>
</template>

vue插件的封装总结：

1. 主要是在插件的 install 方法中，定义如何将插件的功能集成进Vue应用；

2. 使用 export default 导出插件主体；

3. 在Vue应用的入口文件（通常是main.js或main.ts）中，导入创建的插件，并使用 app.use() 方法将其安装到应用中，这样插件提供的功能就可以在整个应用中使用了。