Quasar Framework строится на основе Vue.js, но добавляет собственные слои для упрощения разработки кроссплатформенных приложений. Понимание структуры директорий проекта является ключевым для эффективной работы с этим фреймворком. В стандартном проекте Quasar можно выделить несколько основных директорий и файлов, каждый из которых выполняет конкретные функции.
В корне проекта находятся файлы конфигурации и скрипты сборки:
package.json – содержит зависимости
проекта, скрипты запуска и сборки, а также метаданные проекта.quasar.config.js – главный
конфигурационный файл Quasar, где задаются настройки сборки, плагины,
темы, прокси-серверы и т. д.node_modules/ – директория с
установленными npm-пакетами.README.md – файл с базовой информацией
о проекте, инструкциями по запуску и сборке.Корневая структура позволяет быстро ориентироваться в настройках и зависимостях проекта, а также обеспечивает контроль над конфигурацией Quasar.
src/Основная рабочая зона разработки. Все исходные файлы приложения находятся именно здесь:
src/pages/ – директория для страниц
приложения. Каждая страница представляет собой Vue-компонент и может
быть подключена через маршрутизацию. Структура часто повторяет навигацию
приложения.
src/layouts/ – содержит шаблоны
макетов, например, общий шапочный бар, боковую панель или футер. Лэйауты
используются для унификации внешнего вида страниц и
компонентов.
src/components/ – место для
переиспользуемых Vue-компонентов. Компоненты могут быть как глобальными,
так и локальными, в зависимости от конфигурации.
src/assets/ – статические ресурсы:
изображения, шрифты, стили. Quasar автоматически обрабатывает файлы из
этой директории при сборке.
src/css/ – глобальные CSS или
SCSS-файлы, которые подключаются ко всему приложению. Полезно для
базовых стилей и переменных темы.
src/router/ – конфигурация
маршрутизации Vue Router. Здесь задаются маршруты страниц, lazy loading
компонентов, guards и метаданные страниц.
src/store/ – хранение глобального
состояния через Vuex (или Pinia в новых проектах). Каждый модуль
состояния обычно выделяется в отдельный файл.
src/boot/ – инициализация
глобальных плагинов и библиотек. Boot-файлы подключаются перед
монтированием корневого компонента, что позволяет использовать их в
любом месте приложения.
src/App.vue – корневой
Vue-компонент приложения. Обычно содержит
<router-view> для подгрузки страниц и глобальные
элементы интерфейса.
public/Содержит статические файлы, которые не обрабатываются сборщиком:
index.html – основной HTML-файл
приложения. Здесь подключается корневой компонент Vue.Эта директория важна для файлов, которые должны оставаться неизменными после сборки.
dist/Автогенерируемая при сборке проекта. Содержит готовое приложение для конкретной платформы:
Содержимое этой директории не редактируется вручную, а формируется автоматически Quasar CLI.
test/Используется для хранения модульных и интеграционных тестов:
unit/ – модульные тесты компонентов и
утилит.e2e/ – end-to-end тесты, симулирующие
пользовательские сценарии.Структура тестов обычно повторяет структуру исходного кода, что упрощает навигацию.
assets
проходят обработку сборщика (минификация, оптимизация), а
public — доступна без изменений.Структура директорий в Quasar четко разделяет обязанности каждого уровня приложения: конфигурация, исходный код, ресурсы, тесты и сборка. Это упрощает масштабирование проекта, поддержку командной разработки и интеграцию новых технологий без разрушения существующего кода.