Vue 插件开发核心概念

Vue插件本质
插件是向Vue添加全局级功能的独立模块，通常通过Vue.use()注册。与组件不同，插件作用范围是全局的，且不直接参与UI渲染。

与组件的核心区别

• 组件：局部注册，构成视图层的基础单元
• 插件：全局注册，扩展Vue原型、注入资源或提供工具方法

---

Vue2 插件开发要点

基本结构要求
插件必须暴露install方法，接收Vue构造函数作为首参数：

const MyPlugin = {
  install(Vue, options) {
    // 1. 添加全局方法/属性
    Vue.myGlobalMethod = () => {...}

    // 2. 注入组件选项
    Vue.mixin({...})

    // 3. 添加实例方法
    Vue.prototype.$myMethod = () => {...}
  }
}

典型应用场景

• 全局指令注册
• 全局混入逻辑
• 挂载第三方库到Vue原型

示例：自定义指令插件

export default {
  install(Vue) {
    Vue.directive('focus', {
      inserted(el) {
        el.focus()
      }
    })
  }
}

---

Vue3 插件开发变更点

Composition API 适配
插件需通过app.config.globalProperties挂载全局属性，替代Vue2的原型扩展：

export default {
  install(app, options) {
    app.config.globalProperties.$myMethod = () => {...}
  }
}

Provide/Inject 模式
推荐使用依赖注入替代全局属性污染：

export default {
  install(app, options) {
    app.provide('myService', new MyService())
  }
}

TypeScript 支持
需显式声明类型扩展：

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $myMethod: () => void
  }
}

---

版本兼容策略

通用插件开发建议

1. 通过判断Vue.version动态适配逻辑
2. 对Composition API相关功能做动态导入
3. 核心工具类功能应保持版本无关

条件代码示例

install(app, options) {
  if (app.version.startsWith('2.')) {
    // Vue2 逻辑
  } else {
    // Vue3 逻辑
  }
}

---

调试与发布规范

本地测试流程

1. 在项目中通过npm link进行本地关联
2. 使用Vue.config.devtools启用插件调试

发布配置要点

• 在package.json中指定main和module入口
• 对Vue依赖使用peerDependencies声明
• 提供UMD和ES Module两种打包格式

示例package.json片段

{
  "peerDependencies": {
    "vue": "^2.6.0 || ^3.0.0"
  }
}