Организация кода

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

  • /src — основной каталог исходного кода, содержащий компоненты, страницы, роуты и сервисы.
  • /components — переиспользуемые Vue-компоненты. Важно создавать отдельные подкаталоги для логически связанных компонентов (например, forms, layout, widgets).
  • /layouts — компоненты макета приложения, определяющие общую структуру страниц (header, sidebar, footer). Рекомендуется использовать один основной макет и несколько альтернативных при необходимости.
  • /pages — страницы приложения, каждая страница обычно представлена отдельным Vue-компонентом. Для удобства навигации можно структурировать страницы по поддиректориям.
  • /store — состояние приложения, управляемое Vuex. Разделение на модули рекомендуется для крупных приложений, что позволяет изолировать логику каждого функционального блока.
  • /boot — инициализация сторонних библиотек, плагинов и глобальных настроек. Каждая точка загрузки (boot file) выполняется до монтирования приложения.
  • /router — маршрутизация, где определяются маршруты и их компоненты, включая lazy loading для оптимизации производительности.

Разделение компонентов

Компоненты должны быть чистыми и автономными, с минимальными зависимостями друг от друга. Принципы разделения:

  • Presentational vs Container — контейнерные компоненты управляют состоянием и данными, а презентационные отвечают только за отображение.
  • Single Responsibility Principle — каждый компонент выполняет одну задачу, что упрощает тестирование и переиспользование.
  • Стилизация через SCSS/LESS — локальные стили компонента лучше помещать в <style scoped>, а глобальные переменные и миксины хранить в отдельной директории /css или /styles.

Роутинг и lazy loading

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

const routes = [
  {
    path: '/',
    component: () => import('pages/IndexPage.vue')
  },
  {
    path: '/about',
    component: () => import('pages/AboutPage.vue')
  }
]

Lazy loading позволяет разделять код на чанки, что снижает время первоначальной загрузки и ускоряет отклик приложения.

Состояние приложения и Vuex

Использование Vuex в Quasar требует модульной структуры:

// store/user.js
export default {
  state: () => ({
    profile: null,
    isLoggedIn: false
  }),
  mutations: {
    setProfile(state, profile) {
      state.profile = profile
      state.isLoggedIn = !!profile
    }
  },
  actions: {
    fetchProfile({ commit }) {
      // асинхронный запрос
    }
  },
  getters: {
    isAuthenticated: state => state.isLoggedIn
  }
}

Основной store/index.js подключает модули:

import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'
import user from './user'

export default store(() => {
  const Store = createStore({
    modules: { user },
    strict: process.env.DEBUGGING
  })
  return Store
})

Boot-файлы и плагины

Boot-файлы отвечают за инициализацию сторонних библиотек и глобальных объектов. Пример использования Axios:

import { boot } from 'quasar/wrappers'
import axios from 'axios'

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios.create({
    baseURL: 'https://api.example.com'
  })
})

Каждый boot-файл выполняется перед монтированием приложения, что гарантирует доступность плагина во всех компонентах.

Работа с миксинами и утилитами

Для переиспользуемой логики можно создавать миксины или утилитарные функции:

// src/mixins/formMixin.js
export default {
  methods: {
    validateField(field, rules) {
      // проверка поля
    }
  }
}

Их подключение происходит локально или глобально через boot-файл.

Организация стилей

Quasar поддерживает SCSS и CSS-переменные:

  • Глобальные переменные — в src/css/quasar.variables.scss
  • Локальные стили компонентов — <style scoped lang="scss">
  • Использование CSS-переменных для цветовой схемы и размеров элементов позволяет легко поддерживать единый дизайн во всем приложении.

Разделение логики и представления

Для крупных проектов важно четко разделять:

  • Сервисный слой (/services) — работа с API, бизнес-логика.
  • Компоненты (/components) — отображение данных, вызов сервисов через actions Vuex.
  • Страницы (/pages) — сборка компонентов и организация пользовательского интерфейса.

Автоматизация и linting

Quasar интегрируется с ESLint, Prettier и TypeScript. Настройка строгих правил кода гарантирует единообразие:

  • Проверка импортов и экспорта компонентов
  • Проверка соответствия стилей кодирования
  • Автоматическая корректировка форматирования через Prettier

Эти практики повышают читаемость и упрощают командную разработку.

Итоговые рекомендации по организации кода

  • Использовать модульную структуру Vuex и компоненты с одной ответственностью.
  • Разделять страницы, компоненты, сервисы и стили в отдельные директории.
  • Подключать сторонние библиотеки через boot-файлы.
  • Применять lazy loading для маршрутов и динамическую подгрузку ресурсов.
  • Использовать SCSS-переменные и миксины для унификации стилей.
  • Настроить строгий линтинг и форматирование кода для поддержания качества проекта.
Оглавление