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));
};
}
};
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
在项目中注册并使用
在 main.js 中调用 Vue.use()：
import GlobalUtils from './plugins/globalUtils'-
Vue.use(GlobalUtils, { dateFormat: customFormatFn })—— 第二个参数可传配置，供插件内部灵活使用
之后任意组件中都可直接调用：
<script></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 } });
}
};
注意事项和边界提醒
- 方法名建议统一加
$前缀（如$http、$message），这是 Vue 官方约定，避免与用户定义的 data 或 props 冲突 - 不要在原型上挂载异步操作的原始 Promise 实例，应封装为返回 Promise 的函数，确保每次调用都是独立上下文
- VUE3 中需改用
app.config.globalProperties替代Vue.prototype，但插件结构保持一致 - 如果插件需支持 SSR，注意避开仅浏览器可用的 API（如
document），或做环境判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
