Vue 插件

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。当我们需要在整个应用中普遍使用某些功能时，例如添加全局方法、全局组件、全局指令或为 app 实例添加 property 时，插件就非常有用。

一个典型的例子是 vue-router。当我们执行 app.use(router) 时，实际上就是在安装 vue-router 插件。这个插件会为我们的应用提供 $router 和 $route property，并注册 <router-link> 和 <router-view> 全局组件。

编写一个插件

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个函数，它将被作为 install() 方法。这个 install 方法会接收到 app 实例作为第一个参数，以及用户传入的选项作为第二个参数。

下面是一个简单的插件示例，它为所有组件提供一个全局的 i18n (国际化) 翻译函数。

src/plugins/i18n.js

export default {
  install: (app, options) => {
    // 插件的逻辑

    // 1. 在 app.config.globalProperties 上添加一个全局 property
    // 这样在任何组件的模板中都可以通过 $translate 访问它
    app.config.globalProperties.$translate = (key) => {
      // 通过 `key` 从 `options` 中检索翻译
      // 例如：options.greetings.hello
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    // 2. 提供一个全局可注入的 API
    // 这样在任何组件的 <script setup> 中都可以通过 inject() 访问
    app.provide('i18n', options)

    // 3. 注册一个全局自定义指令
    app.directive('my-directive', {
      /* ... */
    })

    // 4. 注册一个全局组件
    // app.component('MyComponent', MyComponent)
  }
}

使用插件

插件通过 app.use() 方法来安装。它必须在 app.mount() 被调用之前使用。

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(App)

// 插件的选项
const i18nOptions = {
  greetings: {
    hello: '你好！',
    welcome: '欢迎！'
  }
}

// 安装插件并传入选项
app.use(i18nPlugin, i18nOptions)

app.mount('#app')

现在，我们就可以在任何组件的模板中使用 $translate 了。

MyComponent.vue

vue

<script setup>
import { inject } from 'vue'

// 在 <script setup> 中使用 inject 获取插件提供的 property
const i18n = inject('i18n')
console.log(i18n.greetings.hello)
</script>

<template>
  <h1>{{ $translate('greetings.hello') }}</h1>
</template>

插件是一种强大而整洁的方式，用于组织和分发可在整个 Vue 应用中复用的代码，避免了污染全局作用域，并保持了逻辑的封装性。

Vue 插件 ​

编写一个插件 ​

使用插件 ​

Vue 插件

编写一个插件

使用插件