App

App — сущность приложения, которая описывает всё, что необходимо для запуска приложения и его настройки. Здесь находятся ключевые вещи, которые нужны только для запуска самого приложения.

Важность уровня

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

Возможное альтернативное название:

• boot — оно точно выражает суть: запуск приложения и инициализация основных компонентов

Как понять, что сущность — это часть App?

• Это относится непосредственно к старту приложения и его настройке
• Это не какая-то переиспользуемая логика
• Это какая-то конфигурация или интеграция с внешним сервисом, которая важна для всего приложения

Типичная структура

• app
  • assets
  • router.ts
  • config.ts
  • entry.ts
  • integrations
    • google.ts
    • growthbook.ts
  • layouts
    • default.vue
    • clear.vue
  • ui
    • layout-parts
      • Header.vue
      • Footer.vue

Полный пример структуры App

• app
  • layouts
  • integrations

Выберите файл в дереве слева

Работа с интеграциями

Что такое интеграция?

Интеграция — это не готовая логика для переиспользования по проекту, а конфигурация и начальные инициализации для работы с внешним сервисом.

Как другие могут это использовать?

Для этого используется IoC (Inversion of Control). Вы реализуете сущность или сервис, в которую в app будет подставляться конкретная реализация или конфигурация.

Пример интеграции

import { someExternalService } from '@/modules/some-external-service'

const config = {
  apiKey: import.meta.env.VITE_SOME_EXTERNAL_SERVICE_API_KEY,
}

export function initSomeExternalService() {
  someExternalService.init(config)
}

Работа с конфигурациями

Конфигурации работают схоже с интеграциями. Их основная задача — собрать в одном месте все конфигурации для приложения. Это упрощает настройку и контроль в будущем, а также позволяет отделить логику от настроек.

Работа с Layouts

Layouts — лейауты чаще всего используются для настройки общего вида приложения, и их части особо нигде не переиспользуются. Поэтому они комфортно чувствуют себя в app-уровне.

Для реализации отдельных компонентов Layouts можно создать уровень /app/ui и в нём создать отдельные компоненты. Выбор лейаута должен происходить в настройках роутера.

Подробно о том почему это работает именно так вы можете прочитать в разделе Где хранить....

Работа с роутером

Тут всё как вы привыкли в других проектах. Импортируете роутер из папки /router и используете его в main.ts или entry.ts.

Что делать с выносом имён роутов?

Вы можете поместить имена роутов в /common/constants/routes.ts и использовать их в роутере и в коде:

export const ROUTES = {
  HOME: '/',
  ABOUT: '/about',
  PRODUCTS: {
    LIST: '/products',
    DETAIL: (id: string) => `/products/${id}`,
  }
}

Можно ли выносить роуты в модули?

Можно, и если это уместно, то даже нужно. Модули могут экспортировать свои роуты, которые затем импортируются в основной роутер:

export const authRoutes = [
  {
    path: '/auth/login',
    component: () => import('./pages/login.vue')
  }
]