0Pricing
Vue Academy · Урок

Архитектура плагинов и app.use()

Объект плагина { install(app, options) }, доступ к app.component, app.directive и app.provide

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

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

Плагин Vue — это повторно используемый код, добавляющий функциональность на уровне приложения: глобальные компоненты, директивы, внедряемые сервисы или конфигурацию. Примеры: Vue Router, Pinia и библиотеки i18n.

Зарегистрируйте плагин один раз с помощью app.use(plugin).

Контракт install

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

const myPlugin = {
  install(app, options) {
    // register things on the app here
    console.log('installing with', options)
  }
}

export default myPlugin

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

Внутри install используйте app.component(name, definition), чтобы зарегистрировать компонент, доступный в каждом шаблоне без импорта.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'

const uiKit = {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseIcon', BaseIcon)
  }
}

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

Используйте app.directive(name, definition), чтобы глобально зарегистрировать пользовательскую директиву, например v-focus или v-tooltip.

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

// usage in any template: <input v-focus />

Предоставление внедряемых сервисов

app.provide(key, value) открывает доступ к значению, которое любой дочерний компонент может прочитать с помощью inject(key). Это современный способ совместного использования сервисов, например объекта для работы с API или конфигурации, без глобальных переменных.

const apiPlugin = {
  install(app, options) {
    const client = createClient(options.baseURL)
    app.provide('api', client)
  }
}

Использование предоставленного сервиса

Любой компонент использует inject, чтобы прочитать предоставленное плагином значение. Для безопасности предпочтительно применять типизированный ключ внедрения, то есть Symbol, но строковые ключи тоже работают.

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

const api = inject('api')
async function load() {
  const data = await api.get('/users')
}
</script>

Передача параметров плагину

Второй аргумент app.use передаётся как параметр options метода install. Используйте его для настройки поведения во время регистрации.

import { createApp } from 'vue'
import App from './App.vue'
import apiPlugin from './plugins/api'

const app = createApp(App)
app.use(apiPlugin, { baseURL: 'https://api.example.com' })
app.mount('#app')

Плагины выполняются до mount

Все вызовы app.use выполняются до app.mount. К моменту mount каждый глобальный компонент, директива и предоставленное значение уже зарегистрированы, поэтому первый рендеринг сразу получает к ним доступ.

const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(uiKit)
// everything is registered, now render
app.mount('#app')

Идемпотентная установка

Vue не допускает установку одного и того же плагина дважды в одном приложении: второй вызов app.use для идентичного плагина игнорируется. Тем не менее спроектируйте install так, чтобы он был безопасным и не создавал побочных эффектов за пределами экземпляра приложения.

app.use(myPlugin) // installs
app.use(myPlugin) // ignored, no double registration

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

Объединив всё вместе, можно зарегистрировать компонент и директиву, а также предоставить сервис в одном методе install.

import Banner from './Banner.vue'

export default {
  install(app, options = {}) {
    app.component('AppBanner', Banner)
    app.directive('focus', { mounted: (el) => el.focus() })
    app.provide('config', { theme: options.theme || 'light' })
  }
}

Плагин и композабл

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

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

Проверьте своё понимание архитектуры плагинов.

Итоги

Вы изучили архитектуру плагинов:

  • Плагин предоставляет install(app, options) или сам является функцией
  • app.component и app.directive регистрируют глобальные объекты
  • app.provide открывает доступ к внедряемым сервисам, которые читаются через inject
  • app.use(plugin, options) регистрирует плагин до mount
  • Установка идемпотентна: повторная установка игнорируется

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

Урок «Архитектура плагинов и app.use()» бесплатный?

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

Чему я научусь в уроке «Архитектура плагинов и app.use()»?

Объект плагина { install(app, options) }, доступ к app.component, app.directive и app.provide Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Архитектура плагинов и app.use()»?

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

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

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

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

  1. Архитектура плагинов и app.use()
  2. Глобальные свойства и provide/inject в плагинах
  3. Пример плагина уведомлений и всплывающих сообщений
  4. Публикация и типизация плагинов Vue
← Назад к Vue Academy