Vue插件通过挂载到Vue.prototype实现全局方法注入，因其不污染全局命名空间、避免混入冲突、无需逐组件注入而成为最佳实践；需遵循install方法规范，命名加$前缀，Vue3中改用app.config.globalProperties。
Vue 插件开发中，通过原型链注入全局方法是最常用、最清晰的实践方式。它不污染全局命名空间，又能让所有组件实例统一访问，比直接挂载到 window 或滥用混入更可控。
为什么选原型链而不是其他方式
Vue 实例天然继承自 Vue.prototype，只要把方法挂到这个对象上，所有组件里的 this 就能直接调用。相比全局混入，它不会隐式覆盖组件自身的同名方法；相比 Provide / Inject，它无需在每个组件里声明注入，也无需处理作用域层级问题。
标准插件写法：install + prototype
一个合规的 Vue 插件必须暴露 install 方法。在这个方法里，把工具函数挂到 Vue.prototype 上即可：
- 新建
plugins/globalUtils.js：
// 导出一个对象，含 install 方法
export default {
install(Vue, options = {}) {
// 挂载格式化时间方法
Vue.prototype.$formatTime = function(date, fmt = 'YYYY-MM-DD HH:mm:ss') {
return options?.dateFormat?.(date, fmt) || defaultFormat(date, fmt);
};
// 挂载深拷贝方法
Vue.prototype.$deepClone = function(obj) {
return JSON.parse(JSON.stringify(obj));
};
}
};
在项目中注册并使用
在 main.js 中调用 Vue.use()：
立即学习“前端免费学习笔记（深入）”；
import GlobalUtils from './plugins/globalUtils'-
Vue.use(GlobalUtils, { dateFormat: customFormatFn })—— 第二个参数可传配置，供插件内部灵活使用
之后任意组件中都可直接调用：
<script>
export default {
mounted() {
console.log(this.$formatTime(new Date())); // → "2026-06-09 06:39:00"
const copy = this.$deepClone({ a: 1, b: { c: 2 } });
}
};
</script>
注意事项和边界提醒
- 方法名建议统一加
$前缀（如$http、$message），这是 Vue 官方约定，避免与用户定义的 data 或 props 冲突 - 不要在原型上挂载异步操作的原始 Promise 实例，应封装为返回 Promise 的函数，确保每次调用都是独立上下文
- VUE3 中需改用
app.config.globalProperties替代Vue.prototype，但插件结构保持一致 - 如果插件需支持 SSR，注意避开仅浏览器可用的 API（如
document），或做环境判断
