Vue.js

外观

本页内容

插件 ​

简介 ​

插件是自包含的代码，通常用于向Vue添加应用级别的功能。这是我们安装插件的方式

js
import { createApp } from 'vue'

const app = createApp({})

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

插件定义为暴露一个install()方法的对象，或者简单地是一个作为安装函数本身的功能。安装函数接收应用实例以及传递给app.use()的任何附加选项

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

插件没有严格定义的范围，但常见场景中插件有用的包括

  1. 使用app.component()和app.directive()注册一个或多个全局组件或自定义指令。

  2. 通过调用app.provide()使资源在整个应用中可注入。

  3. 通过将其附加到app.config.globalProperties添加一些全局实例属性或方法。

  4. 需要执行上述操作组合的库（例如vue-router）。

编写插件 ​

为了更好地理解如何创建自己的Vue.js插件，我们将创建一个非常简化的插件，用于显示i18n（即国际化）字符串。

让我们首先设置插件对象。建议在单独的文件中创建它并导出，如下所示，以保持逻辑封装和分离。

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

我们想要创建一个翻译函数。这个函数将接收一个点分隔的key字符串，我们将使用它来在用户提供的选项中查找翻译的字符串。这是在模板中的预期用法

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

由于这个函数应该在所有模板中全局可用，我们将通过将它们附加到我们的插件中的app.config.globalProperties来实现这一点

js
// 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)
    }
  }
}

我们的$translate函数将接受一个如greetings.hello的字符串，在用户提供的配置中查找，并返回翻译的值。

包含翻译键的对象应在安装期间通过传递到app.use()的附加参数传递给插件

js
import i18nPlugin from './plugins/i18n'

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

现在，我们的初始表达式$translate('greetings.hello')将在运行时被替换为Bonjour!。

另请参阅：增强全局属性

提示

由于太多不同插件注入的全局属性可能会迅速变得混乱，因此请尽量少用全局属性。

使用插件提供/注入 ​

插件还允许我们使用 inject 向插件用户提供函数或属性。例如，我们可以允许应用程序访问 options 参数以使用翻译对象。

js
// plugins/i18n.js
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

现在插件用户将能够使用 i18n 键将插件选项注入到他们的组件中

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

const i18n = inject('i18n')

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

NPM 的打包包 ​

如果您还想构建和发布您的插件供他人使用，请参阅 Vite 的库模式部分。

在 GitHub 上编辑此页面