松哥手把手教你在 Vue3 中自定义插件

松哥正在录制TienChin项目视频，使用的技术栈包括Spring Boot和Vue3，视频将涵盖多种技术点。本篇文章旨在教授如何在Vue3中定义插件，这是理解TienChin项目前端代码的关键技能。

1. Vue 插件

在Vue中，可以通过定义全局方法并将其挂载到Vue上来实现简单的功能。在Vue3中，此方式有所变化，原来的prototype被替换为了config.globalProperties。这种方法适合定义工具方法，但对于复杂的插件，则需使用Vue的插件定义方式。

2. 自定义插件

2.1 基本用法

自定义插件要新建一个目录和文件，然后在主文件main.js中引入并使用。插件中的install方法会自动执行，可以接收Vue实例和可选的options参数。

2.2 加入组件

可以在插件中注册全局组件，允许在项目的任意位置使用。

2.3 加入指令

插件还可以注册指令，通过options动态传入参数来控制指令的行为。

2.4 provide & inject

通过provide和inject可以在插件中提供方法，并在需要的地方注入方法使用。

3. 小结

自定义插件可以实现丰富的功能，适用于不仅仅是全局方法的场景。在Vue2中全局方法的挂载方式为Vue.prototype，而在Vue3中则改为app.config.globalProperties。

欢迎大家跟随松哥一起完成TienChin项目，体验超90%的完成率。

DevOps和它的朋友们——聊聊其他“Ops”（二）

了解更多

想要了解更多内容？

查看原文：松哥手把手教你在 Vue3 中自定义插件

文章来源：

江南一点雨

扫码关注公众号