Vue Academy · Урок

Разработка плагинов

Создавайте устанавливаемые плагины Vue

Урок 2 из 313 шагов

«Разработка плагинов» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Что такое плагин

Плагин Vue объединяет функциональность уровня приложения, которую можно установить одним вызовом: глобальные компоненты, директивы, свойства или интеграции сторонних библиотек. Так библиотеки вроде Vue Router и Pinia подключаются к вашему приложению.

Функция установки

Плагин — это объект с методом install (или просто функция). Vue вызывает его, передавая экземпляр приложения и все указанные вами параметры.

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

Установка плагина

Зарегистрируйте плагин с помощью app.use, при необходимости передав объект параметров. Vue выполняет функцию установки один раз.

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

Регистрация глобальных компонентов

Внутри функции установки зарегистрируйте компоненты глобально, чтобы любая часть приложения могла использовать их без импорта.

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

Регистрация глобальных директив

Плагин также может регистрировать директивы глобально, объединяя связанные действия с DOM в один устанавливаемый пакет.

export const focusPlugin = {
  install(app) {
    app.directive("focus", {
      mounted(el) { el.focus() }
    })
  }
}

Предоставление глобальных свойств

Используйте app.config.globalProperties, чтобы добавить свойство, доступное в каждом экземпляре компонента, например форматировщик или клиент HTTP.

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

Использование provide в API композиции

Чтобы удобно работать с API композиции, используйте app.provide в своём плагине, чтобы компоненты могли получить это значение через inject в setup.

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

Передача параметров

Аргумент параметров позволяет пользователям настроить ваш плагин. Считывайте его внутри функции установки, чтобы настроить поведение.

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

Плагин-функция

Плагином может быть обычная функция, а не объект с функцией установки: Vue использует саму функцию как установщик.

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

Полный пример плагина

Настоящий плагин часто объединяет несколько таких возможностей: регистрирует component, directive и глобальное свойство в одной функции установки.

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

Когда стоит создавать плагин

Используйте плагин, когда функциональность действительно нужна всему приложению: например, набор интерфейсных компонентов, HTTP-слой, интернационализация или аналитика. Для логики, относящейся только к одной функции, компонуемая функция обычно будет лучшим и более лёгким выбором.

Быстрая проверка

Проверьте свои знания о плагинах.

Ответь в интерактивном уроке

Итоги

Плагин предоставляет функцию install(app, options) и регистрируется с помощью app.use. Внутри функции установки можно регистрировать глобальные компоненты и директивы, добавлять глобальные свойства через config.globalProperties и передавать значения с помощью provide для внедрения. Используйте плагины для возможностей, нужных всему приложению, а компонуемые функции — для локальной логики. Далее вы узнаете, как организовать масштабируемый проект.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Разработка плагинов» бесплатный?

Да — полный текст урока «Разработка плагинов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Разработка плагинов»?

Создавайте устанавливаемые плагины Vue Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Разработка плагинов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy