Vue3教程：如何构建插件？

1. 我们可以用 Vue 插件做什么？
2. 创建我们的 Vue 3 插件
3. 从 Vue 插件添加全局组件
4. 我们还可以在这些组件中添加样式
5. 使用 Vue 插件添加全局指令
6. 使用插件选项提供定制
7. 使用 Mixins 添加方法、数据和其他组件选项
8. 在插件中使用 Provide 和 Inject

插件是为 Vue 应用添加可重用功能的好方法。有了大量用于组件、路由等的现有插件，Vue 的生态系统为许多常见的用例提供了解决方案。

一些常用插件有vue-router、vue custom-element 和 vue-touch。

然而，总会有时候，没有一个插件能满足我们的需求时，我们就需要自己写个插件满足产品的口味。

在本教程中，我们来学习构建自己的 Vue 3 插件。

我们可以用 Vue 插件做什么？

简单地说，Vue 插件允许我们将任何类型的功能提取到其自身包含的代码中，这些代码可以在不同的项目中重用。

通常，它们被用于向 Vue 应用程序添加全局级别的功能。根据Vue 文档，以下是一些插件最常见的用法。

• 添加全局组件
• 添加全局指令，过渡或其资源
• 使用全局 mixins 添加组件选项(比如vue-router)
• 将加法属性添加到 Vue 实例上（通过app.config.globalproperties）

接下来我们会一个一个的讲，首先先来创建我们第一个插件。

创建我们的 Vue 3 插件

在本教程中，我们将制作一个插件，该插件添加了允许我们将 UI 元素和样式添加到我们的应用程序中。

我们创建一个名为MyPlugin.js的文件，并在其中创建一个带有install方法的export default。这个方法有两个参数:

• app – 由 Vue 的 createApp 生成的 app 对象
• options – 用户传入的选项

// MyFirstPlugin.js

export default {
    install: (app, options) => {
      // TODO
    }
}

然后，为了将这个插件插入到 Vue 应用中，进入main.js文件并使用app.use()。

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import MyFirstPlugin from './plugin'

const app = createApp(App)

app.use(MyFirstPlugin, /* 可以传递 options 作为第二个参数*/)

app.mount('#app')

这样，我们就做好的初步的工作。

从 Vue 插件添加全局组件

Vue 插件的一个重要用途是添加可以在 Vue 项目中的任何地方使用的全局组件，而不必每次都要导入。

使用app参数，我们可以使用app.component语法声明全局组件。

通过使用app.component，我们可以使用单文件组件或直接在 js 文件中声明我们的组件。

假设我们想创建一个标题组件(MyHeader.vue)–它包含了一篇文章的信息。

<template>
    <div>
        <h1 >   
            <slot name="title" />
        </h1>
        <h2 >
            <slot name="author" />
        </h2>
    </div>
</template>

回到 MyFirstPlugin.js，将它添加到我们的插件中。

// MyFirstPlugin.js

import MyHeader from './components/MyHeader.vue'
export default {
    install: (app, options) => {
        /* 声明全局组件 */      
        app.component('my-header', MyHeader)
    }
}

现在，我们可以在任何地方使用MyHeader，因为它是全局注册的。

例如， 在 App.vue 中使用。不需要导入，只需将其添加到模板中。

<template>
  <my-header>
    <template #title> 
      Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
    </template>
    <template #author> 
      Matt Maribojoc
    </template>
  </my-header>
</template>

运行结果：

在插件中使用 Provide 和 Inject

让特定组件访问不同属性和方法的一种强大方法是使用 Vue 中的 provide和inject模式。

这允许我们的插件 “provide"一个属性或方法，并允许任何组件 "inject" 这个值。

来看看一个例子，我们创建一个logout 方法。我们不需要这个方法对每一个组件都可用，但我们想只创建一个logout 方法，这样将来修改起来就更容易。

在我们的插件内部，我们声明我们的方法并调用app.provide来将它提供给我们的应用的其他部分。

// MyFirstPlugin.js

import { provide } from 'vue'

export default {
    install: (app, options) => {
        const logout = () => {
            console.log('Logout is being called')
        }

        app.provide('logout', logout)
    }
}

然后，在任何组件中，我们都可以注入这个方法，并创建一个调用logout方法的按钮。

<template>
  <button @click="logout"> Logout </button>
  <p v-font-size:small>Small</p>
  <p v-font-size:medium>Medium</p>
  <p v-font-size:large>Large</p>
  <a :href="featuredLink"> Featured Link </a>
  <my-header>
    <template #title> 
      Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
    </template>
    <template #author> 
      Matt Maribojoc
    </template>
  </my-header>
</template>

<script setup>
import { inject } from 'vue'
const logout = inject('logout')
</script>

运行后会看到，每当我们点击按钮，logout里面内容就会被打印出来。