Структура расширения

В экосистеме Quasar Framework расширения (Extensions) позволяют добавлять функциональные возможности к проекту без изменения основной структуры приложения. Каждое расширение организуется как самостоятельный пакет с определённой структурой файлов и обязательными элементами.

Основные компоненты расширения

  1. package.json Содержит метаданные расширения:

    • name — уникальное имя расширения в формате @scope/name или просто name.
    • version — версия пакета, соответствующая семантическому версионированию.
    • quasar — ключ, определяющий конфигурацию расширения для Quasar CLI.
    • dependencies и devDependencies — зависимости, необходимые для работы расширения и его сборки.

Пример minimal package.json:

{
  "name": "my-quasar-extension",
  "version": "0.1.0",
  "quasar": {
    "id": "my-extension",
    "boot": "boot/index.js"
  },
  "dependencies": {},
  "devDependencies": {}
}
  1. boot-файл Обычно находится по пути boot/index.js или boot/index.ts. Boot-файл выполняется при инициализации Quasar приложения и служит точкой подключения логики расширения, например, регистрации компонентов или плагинов.
export default ({ app, router, store, Vue }) => {
  Vue.prototype.$myExtension = {
    log(message) {
      console.log(`[MyExtension]: ${message}`);
    }
  }
}

  1. Компоненты и утилиты Расширение может содержать:

    • Vue-компоненты, доступные для использования в шаблонах.
    • Композиционные функции (Composition API) для реактивной логики.
    • Утилиты и сервисы, которые можно импортировать напрямую.

Структура каталога может выглядеть так:

my-quasar-extension/
├─ boot/
│  └─ index.js
├─ components/
│  ├─ MyButton.vue
│  └─ MyDialog.vue
├─ composables/
│  └─ useFeature.js
├─ utils/
│  └─ helper.js
└─ package.json
  1. Конфигурационные файлы Расширение может предоставлять конфигурацию, которая интегрируется с CLI через quasar.extensions.json. Она описывает параметры расширения, доступные для настройки при установке:
{
  "prompts": [
    {
      "name": "enableFeatureX",
      "type": "confirm",
      "message": "Включить Feature X?"
    }
  ]
}

Логика работы расширения

  • Инициализация происходит через boot-файл, где создаются глобальные объекты, плагины и обработчики.
  • Регистрация компонентов может выполняться автоматически через функцию Vue.component или экспортироваться для импорта пользователем.
  • Интеграция с CLI обеспечивает добавление расширения в проект через quasar ext add <extension-name>. CLI выполняет скрипт index.js расширения, проверяет зависимости и применяет конфигурацию.

Рекомендации по организации

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

Типовые сценарии применения

  1. Добавление UI-компонентов: расширение регистрирует набор переиспользуемых Vue-компонентов.
  2. Подключение плагинов: например, интеграция сторонних библиотек (axios, chart.js) через boot-файл.
  3. Расширение CLI: добавление новых команд или хуков для сборки и разработки.
  4. Преднастройка проекта: установка шаблонов и конфигураций, которые упрощают старт нового проекта.

Важные моменты

  • Boot-файл выполняется один раз при старте приложения.
  • Расширение не должно напрямую модифицировать существующие компоненты приложения.
  • Любые глобальные объекты или плагины должны регистрироваться через Vue или Quasar API, чтобы избежать конфликтов.

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

Оглавление