重生之我在学Vue--第16天 Vue 3 插件开发

重生之我在学Vue–第16天 Vue 3 插件开发

前言

在 Vue 的世界里，插件就像是一把万能钥匙，它能让我们将通用功能封装成可复用的模块，实现 全局能力扩展。今天我们将从零开发一个全局通知插件，让你的 Vue 应用拥有优雅的消息提示能力！

Vue3 官方中文文档传送点： 插件 | Vue.js

插件开发的核心是理解 install 方法 和 全局资源注册 的机制

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-优快云博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-优快云博客

一、插件的作用与开发思路

1.1 插件能做什么？

场景	实现方式	典型案例
全局组件注册	app.component()	Element Plus 组件库
全局指令添加	app.directive()	v-loading 指令
全局混入逻辑	app.mixin()	权限校验逻辑
全局属性/方法注入	app.config.globalProperties	$axios 实例

1.2 插件开发四部曲

1. 定义插件对象：包含 install 方法
2. 注册全局资源：组件/指令/属性等
3. 注入应用实例：通过 app.use() 安装
4. 项目中调用：任意组件内使用

二、开发全局通知插件

2.1 插件基础结构

// plugins/notification.js
export default {
   
   
  install: (app, options) => {
   
   
    // 在这里注册全局资源
  }
}

2.2 完整插件代码（带注释解析）

import {
   
    h, render, ref } from 'vue'

// 1. 创建通知容器组件
const NotificationContainer = {
   
   
  setup() {
   
   
    const notifications = ref([])

    // 添加通知
    const add = (notification) => {
   
   
      notifications.value.push(notification)
      
      // 自动关闭
      if (notification.duration > 0) {
   
   
        setTimeout(() => {
   
   
          remove(notification.id)
        }, notification.duration)
      }
    }

    // 移除通知
    const remove = (id) => {
   
   
      notifications.value = notifications.value.filter(n