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

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

文章目录

​​1. Vue 插件​​​​2. 自定义插件​​

​​2.1 基本用法​​​​2.2 加入组件​​​​2.3 加入指令​​​​2.4 provide & inject​​

​​3. 小结​​

最近在录 TienChin 项目，项目涉及到了 Vue 中插件的定义，因此整了这么一篇文章，手把手教大家在 Vue3 中定义插件，这个技能掌握了，就可以看懂 TienChin 前端代码了。

1. Vue 插件

在 Vue 中，一些简单的功能，我们可以直接定义为全局方法，然后挂到 Vue 上就能使用了，例如在 vhr 中，我们将网络请求方法进行封装，然后挂到了 Vue.prototype 上就可以了，类似下面这样：

import {postRequest} from "./utils/api";Vue.prototype.postRequest = postRequest;

然后在使用的地方，就可以通过 this.postRequest 去使用了。

小伙伴们需要注意，这个在 Vue3 中有所变化，prototype 变为了 config.globalProperties，也就是在 Vue3 中再想要挂载全局方法，应该是 ​​const app = createApp(App);app.config.globalProperties.useDict = useDict​​ 这种形式了（具体我将在 TienChin 项目中和大家细聊）。

这也算是一种插件定义方式，但是这种一般适用于一些工具方法，无法定义一些比较复杂的插件，复杂的插件还是得通过 Vue 中提供的插件定义方式来定义。

2. 自定义插件

2.1 基本用法

首先我们新建一个目录 plugins 专门用来放我们的插件，然后在这个目录中新建一个 index.js 文件用来开发插件，内容如下：

export default { install: (app,) => { console.log("我的第一个插件") }};

install 中的方法将会被自动执行。

接下来我们就可以在 main.js 中引入我们这个插件了：

const app = createApp(App);import plugin from './plugins'app.use(plugin);

app.use 就表示引入插件，引入插件之后，插件中的 install 方法就会被自动执行。

app.use 方法接收两个参数，第一个参数就是我们导入的插件 js 对象，第二个参数是可选的，大家看到插件定义时候的 install 方法有两个参数，第一个参数是 Vue 实例，这是自动传入的，第二个参数 options 则是我们在 app.use 中，通过第二个参数传入进来的。当然上面这个例子中松哥没有传递第二个参数。

好了，如此配置之后，接下来启动项目，控制台就可以看到有日志打出了。

这样的插件未免过于简单，接下来我们就给这个插件加点料。

2.2 加入组件

首先我们定义一个新的组件，如下：