Плагины ​

Вступление ​

Плагины — это самодостаточный код, который обычно добавляет функциональность к Vue на уровне приложения. Вот как мы устанавливаем плагин:

import { createApp } from 'vue'  const app = createApp({})  app.use(myPlugin, {  /* дополнительные опции */ })

Плагин определяется либо как объект, который предоставляет метод install(), либо просто как функция, которая действует как сама функция установки. Функция установки получает экземпляр приложения вместе с дополнительными опциями, которые передаются в app.use(), если таковые имеются:

const myPlugin = {  install(app, options) {  // настройка приложения  } }

Нет чётко определенной области применения плагина, но наиболее распространенные сценарии, в которых плагины полезны, включают в себя:

1. Регистрация одного или нескольких глобальных компонентов или пользовательских директив в app.component() и app.directive().

2. Сделать ресурс injectable во всём приложении через вызов app.provide().

3. Добавление некоторых свойств или методов глобального экземпляра, присоединив их к app.config.globalProperties.

4. Библиотека, которая должна выполнить определенную комбинацию вышеупомянутого (например, vue-router).

Написание плагина ​

Чтобы лучше понять, как создавать собственные плагины Vue.js, мы создадим очень упрощённую версию плагина, который отображает строки i18n (сокращённо от Интернационализация).

Начнём с настройки объекта плагина. Рекомендуется создать его в отдельном файле и экспортировать, как показано ниже, чтобы держать логику отдельно.

export default {  install: (app, options) => {  // Здесь содержится код плагина  } }

Мы хотим создать функцию перевода. Эта функция получит разделенную точками строку key, которую мы будем использовать для поиска перевода строки в опциях, предоставленных пользователем. Это предполагает использование в шаблонах:

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

Поскольку эта функция должна быть глобально доступной во всех шаблонах, мы сделаем ее таковой, присоединив к app.config.globalProperties нашего плагина:

export default {  install: (app, options) => {  // введение глобально доступного метода $translate()  app.config.globalProperties.$translate = (key) => {  // получить вложенное свойство в `options`,  // используя `key` в качестве пути  return key.split('.').reduce((o, i) => {  if (o) return o[i]  }, options)  }  } }

Наша функция $translate возьмёт строку, например, greetings.hello, заглянет в предоставленную пользователем конфигурацию и вернёт переведенное значение.

Объект, содержащий переведенные ключи, следует передать плагину при установке с помощью дополнительных параметров к app.use():

import i18nPlugin from './plugins/i18n'  app.use(i18nPlugin, {  greetings: {  hello: 'Bonjour!'  } })

Теперь наше исходное выражение $translate('greetings.hello') будет заменено на Bonjour! во время выполнения.

Смотрите также: Расширение глобальных свойств

Provide / Inject с плагинами ​

Плагины также позволяют нам использовать provide, чтобы предоставить пользователям плагина доступ к функции или атрибуту. Например, мы можем позволить приложению иметь доступ к параметру options, чтобы иметь возможность использовать объект с переводами.

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

Пользователи плагина теперь смогут добавлять его параметры в свои компоненты с помощью ключа i18n:

<script setup> import { inject } from 'vue'  const i18n = inject('i18n')  console.log(i18n.greetings.hello) </script>

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

Сборка для NPM ​

Если вы хотите разработать и опубликовать свой плагин для использования другими, смотрите раздел документации Vite о режиме Library Mode.