Vue3实战笔记（60）—从零开始：一步步搭建Vue 3自定义插件

---

前言

在开发和学习中，经常使用一些好用的插件，那么如何创建一个自己的插件呢？在 Vue 3 中，你可以通过创建一个包含 install 方法的对象来定义自定义插件。install 方法接收两个参数：Vue 应用实例（app）和可选的选项对象。

---

一、自定义插件

以下是一个简单的 Vue 3 自定义插件示例，该插件用于在控制台输出一条消息，并在全局混入一个方法：

// plugins/myPlugin.js  
export default {  install(app, options) {  // 输出一条消息到控制台  console.log('山花自定义的插件安装成功!');  // 全局混入一个方法  app.config.globalProperties.$myMethod = function() {  console.log('这是山花自定义的插件!');  };  // 如果提供了选项，可以在这里使用它们  if (options) {  console.log('Options:', options);  // 根据选项执行一些操作...  }  }  
};

二、使用步骤

接下来，在你的 Vue 应用中使用这个插件：

代码如下（示例）：

// main.js  
import { createApp } from 'vue';  
import App from './App.vue';  
import MyPlugin from './plugins/myPlugin';  const app = createApp(App);  // 使用插件  
app.use(MyPlugin, { /* 可以传递选项 */ });  app.mount('#app');

现在，当你在组件中调用 $myMethod 时，它将触发从插件中定义的全局方法：
代码如下（示例）：

<template>  <div>  <button @click="callMyMethod">Call My Method</button>  </div>  
</template>  <script>  
export default {  methods: {  callMyMethod() {  this.$myMethod(); // 调用从插件中定义的全局方法  }  }  
};  
</script>

---

总结

点击按钮时，你将在控制台看到消息 “这是山花自定义的插件!”。同时，在 Vue 应用启动时，你也会在控制台看到 “山花自定义的插件安装成功!” 的消息。一个自定义插件就完成了，以后我们也可以自己写高大上的插件。

把行动交给现在，把结果交给时间。