Создание App Extensions

App Extensions в Quasar представляют собой мощный механизм расширения функциональности приложений без необходимости изменения исходного кода фреймворка. Они позволяют интегрировать сторонние библиотеки, добавлять новые компоненты, команды CLI и шаблоны проектов. Основная цель App Extensions — стандартизированное подключение функциональных модулей, которое легко поддерживать и обновлять.

App Extension состоит из нескольких обязательных элементов: пакета npm с предопределенной структурой, скриптов установки, конфигурации и наборов Vue-компонентов или утилит. Важный аспект — App Extension не меняет ядро Quasar, что обеспечивает совместимость с будущими версиями фреймворка.

Структура App Extension

Каждое расширение имеет типовую структуру каталогов:

my-extension/
├─ src/
│  ├─ components/
│  ├─ boot/
│  └─ directives/
├─ prompts/
├─ index.js
├─ package.json
└─ quasar.extension.json
  • src/components — Vue-компоненты, доступные для использования в проекте.
  • src/boot — инициализационные скрипты, выполняющиеся при старте приложения.
  • src/directives — пользовательские Vue-директивы.
  • prompts — шаблоны и вопросы для генерации файлов при установке расширения через CLI.
  • index.js — основной модуль, описывающий установку и конфигурацию расширения.
  • quasar.extension.json — метаинформация о расширении: имя, версии Quasar, описание, автор и зависимости.

Регистрация и установка расширения

Установка App Extension выполняется через CLI:

quasar ext add my-extension

CLI выполняет следующие шаги:

  1. Проверка совместимости версии Quasar.
  2. Скачивание пакета npm или локальной папки с расширением.
  3. Выполнение скриптов install или prompts для настройки проекта.
  4. Добавление всех компонентов, boot-файлов и директив в конфигурацию приложения.

Удаление осуществляется аналогично:

quasar ext remove my-extension

При этом CLI удаляет все интегрированные файлы и очищает конфигурацию Quasar.

Создание собственного App Extension

Процесс разработки собственного расширения делится на несколько этапов:

  1. Инициализация проекта
quasar ext create my-extension

Эта команда создаёт шаблон расширения с минимальной структурой и файлом quasar.extension.json.

  1. Добавление компонентов

Все Vue-компоненты помещаются в src/components и экспортируются через index.js:

import MyButton from './components/MyButton.vue';

export default function (api) {
  api.registerComponent('MyButton', MyButton);
}

api.registerComponent обеспечивает автоматическую регистрацию компонента в приложении, что позволяет использовать его без ручного импорта.

  1. Подключение boot-файлов

Boot-файлы создаются в src/boot и регистрируются аналогично:

export default async ({ app, router, store, Vue }) => {
  Vue.prototype.$myPlugin = { doSomething: () => console.log('Action') }
}

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

  1. Добавление CLI prompts

prompts — это каталог с файлами, определяющими вопросы для пользователя при установке расширения. Например, выбор темы или конфигурации:

module.exports = [
  {
    type: 'list',
    name: 'theme',
    message: 'Выберите тему для компонента',
    choices: ['light', 'dark'],
  }
];

Результаты prompts можно использовать в установочном скрипте для генерации конфигурационных файлов или шаблонов.

  1. Настройка quasar.extension.json

Файл метаданных включает:

{
  "name": "my-extension",
  "version": "1.0.0",
  "description": "Пример собственного расширения Quasar",
  "author": "Developer Name",
  "quasarVersion": "^2.0.0",
  "type": "app-extension",
  "js": ["index.js"]
}

Он информирует Quasar CLI о том, как интегрировать расширение и какие файлы требуется обработать.

Интеграция сторонних библиотек

App Extensions позволяют подключать любые сторонние библиотеки и плагины. Для этого используется boot-файл:

import SomeLibrary from 'some-library'

export default async ({ app, Vue }) => {
  Vue.use(SomeLibrary, { option: true })
}

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

Использование расширений в проекте

После установки компоненты и директивы становятся доступными глобально. Например:

<template>
  <q-page>
    <my-button label="Нажми меня" />
  </q-page>
</template>

Boot-файлы и плагины интегрируются автоматически через Vue-прототип или Composition API. Дополнительно можно использовать API расширения для динамического подключения компонентов:

this.$myPlugin.doSomething()

Обновление и публикация расширений

Обновление App Extension выполняется через npm-пакет. Необходимо:

  1. Увеличить версию в package.json и quasar.extension.json.
  2. Опубликовать пакет на npm или другой реестр.
  3. Уведомить пользователей о новой версии, которую они смогут установить через CLI:
quasar ext update my-extension

Публикация обеспечивает совместимость с Quasar CLI и автоматическую интеграцию всех новых функций.

Лучшие практики разработки

  • Разделять компоненты, boot-файлы и директивы в отдельные папки.
  • Минимизировать зависимости и проверять совместимость с текущей версией Quasar.
  • Использовать prompts для гибкой настройки расширения пользователем.
  • Обеспечивать обратную совместимость при обновлении расширений.
  • Документировать все функции и API расширения, чтобы облегчить интеграцию в сторонние проекты.

Создание App Extensions в Quasar превращает стандартное приложение в модульную, расширяемую систему, где новые возможности могут быть добавлены без изменения основного кода и с минимальными усилиями.

Оглавление