Vue 2 插件核心是通过 install 方法向 Vue.prototype 挂载以 $ 开头的实例方法,需在 new Vue 前用 Vue.use 注册;支持配置解构、避免状态污染,并可扩展全局指令、过滤器和混入。

Vue 2 编写可复用插件的核心,是通过 install 方法向 Vue.prototype 挂载方法或属性,让所有组件实例都能直接调用(如 this.$http、this.$toast),同时确保注册时机正确、命名规范、配置灵活。
定义 install 方法并挂载到原型
插件必须导出一个带 install 方法的对象。该方法接收 Vue 构造函数作为第一个参数,你可以在其中扩展全局能力:
- 用
Vue.prototype.$methodName = function() { ... }添加实例方法,方法内可通过this访问当前组件的 data、methods、$refs 等 - 推荐以
$开头命名(如$toast),避免与用户定义的属性或方法冲突 - 不要挂载响应式对象(如直接赋值一个 Vue 实例)或覆盖原生属性(如
$data、$el)
支持可选配置与上下文隔离
插件应允许传入配置,并保证不同项目之间互不干扰:
- 在
install中解构options,设置默认值,例如:const { baseUrl = '/api', timeout = 5000 } = options || {} - 避免在
Vue.prototype上直接存状态(如 token、loading 标志),而应在方法内部按需读取(比如从 Vuex 或 localStorage 获取) - 若需共享逻辑但不共享状态,可用闭包封装配置,而非污染原型
正确注册并控制生效时机
挂载操作必须在创建根 Vue 实例之前完成,否则已初始化的组件不会继承新功能:
立即学习“前端免费学习笔记(深入)”;
- 在
main.js中先调用Vue.use(MyPlugin, options),再执行new Vue({ ... }) - 模块环境下(Webpack、Browserify)无法自动识别插件,必须显式调用
Vue.use - 不建议在组件内部或运行时动态注册,这会导致部分组件不可用
可扩展的典型能力类型
除了实例方法,插件还可统一注册其他全局功能:
-
全局指令:用
Vue.directive('focus', { mounted(el) { el.focus() } }),模板中写v-focus -
全局过滤器:用
Vue.filter('currency', value => `¥${value.toFixed(2)}`),模板中写{{ price | currency }} -
混入(Mixin):用
Vue.mixin({ created() { ... } })注入通用生命周期逻辑(慎用,优先考虑插件+实例方法)


















