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 应用启动时，你也会在控制台看到 “山花自定义的插件安装成功!” 的消息。一个自定义插件就完成了，以后我们也可以自己写高大上的插件。

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