0. Intro

Plugins | Vue.js (vuejs.org)

What are plugins?

Plugins are self-contained code that usually add app-level functionality to Vue.

插件就是一些可以给 Vue 增加全局功能的代码。

Example - install a plugin

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* optional options */
})

How it works

插件可以通过有 install method 的 object 定义，也可以是一个 install function。

install function 会接收到 app instance 以及传给 app.use() 的额外 options。

A plugin is defined as either an object that exposes an install() method, or simply a function that acts as the install function itself. The install function receives the app instance along with additional options passed to app.use(), if any.

Example

const myPlugin = {
  install(app, options) {
    // configure the app
  }
}

When to use plugins? - common use cases

1. Register one or more global components or custom directives with app.component() and app.directive() .
2. Make a resource injectable throughout the app by calling app.provide() .
3. Add some global instance properties or methods by attaching them to app.config.globalProperties .
4. A library that needs to perform some combination of the above (e.g. vue-router ).

1. Writing a Plugin

Example - simplified version of i18n strings

In order to better understand how to create your own Vue.js plugins, we will create a very simplified version of a plugin that displays i18n (short for Internationalization ) strings.

1. Set up the plugin object - 建议写在单独 file 里面

It is recommended to create it in a separate file and export it, as shown below to keep the logic contained and separate.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

我们想要 translate key to target language，这是全局起作用的，所以我们通过app.config.globalProperties来 expose 这个 function.

这个功能会接收到 “dot-delimited key string”, 我们用这个 string 来查找 user-provided options 里面翻译好的字符串。

// plugins/i18n.js
export default {
  install: (app, options) => {
    // inject a globally available $translate() method
    app.config.globalProperties.$translate = (key) => {
      // retrieve a nested property in `options`
      // using `key` as the path
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

2. 使用

这个 plugin 希望 user 在使用 plugin 的时候，可以通过 options 来传入一个包含 translated keys 的 object，具体的用法如下（把 hello 翻译成 Bonjour）：

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

Our $translate function will take a string such as greetings.hello, look inside the user provided configuration and return the translated value - in this case, Bonjour!.

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

See also: Augmenting Global Properties

Note - 不要滥用 global properties

Use global properties scarcely, since it can quickly become confusing if too many global properties injected by different plugins are used throughout an app.

2. Provide / Inject with Plugins

我们还可以用 inject 来给插件用户提供功能，比如我们可以允许 application access options parameter，从而能够使用 translation object。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

插件用户可以 inject plugin options into their components using the i18n key。

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}