На проекте используется собственная архитектура, которая позволяет легко ориентирваться в проекте во время разработки.
Структура архитектуры:
.
├── public
└── src
├── app
│ ├── assets
│ ├── directives
│ ├── layouts
│ ├── providers
│ │ ├── router
│ │ └── stores
│ ├── styles
│ ├── App.vue
│ └── index.ts
├── components
├── composables
├── pages
├── services
├── types
├── widgets
└── main.ts
Внутри каждого слоя могут находиться либо модули, либо группы таких модулей.
В группы следует объединять модули, схожие между собой по смыслу, например, таблицы.
Пример структуры модуля:
some-module
├── ui
│ ├── _styles.scss
│ └── SomeModule.vue
├── utils
│ └── useUtilForSomeModule.ts
└── index.ts
Да-да, стили стоит выносить из Vue файла, чтобы улучшит читаемость кода этого компонента!
Импорт модуля происходит по его пути, к примеру, если представленный выше модуль находся в widgets, то импорт бы выглядел так:
import SomeModule from '@/widgets/some-module'
Слой app является сервисным и представляет собой набор важных элементов, необходимых для корректной работы приложения.
Основными и самыми выжными элементами можно выделить router и store (в нашем случае pinia).
Также в сервисный слой стоит выносить то, чем пользуется все приложение, например глобальные стили или директивы.
Слой components является местом для хранения переиспользуемых компонентов приложения.
Какую-либо логику внутри данного слоя писать стоит лишь в редких случаях, но это не рекомендуется, так как компоненты используются во всех частях приложения.
Рекурсивный импорт внутри components запрещен (из components в components импортить нельзя)
Стандартные composables функции, пришедшие к нам во Vue3.
composables- это функции, которые возвращают данные, методы или вычисления для использования внутри Vue файлов.
В слой widgets выносятся блоки страниц или компоненты с бизнес-логикой.
Внутри слоя можно использовать components, composables и services.
Рекурсивный импорт внутри widgets разрешен только из разных групп:
- В
widgets/gridимпортwidgets/filtration- можно - В
widgets/gridимпортwidgets/grid- нельзя
Слой services, как и следует из названия, тоже является сервисным. Но сюда выносится постоянно использующаяся логика и логика, взаимодействующая с данными.
Отличным примером того, какие сервисы лучше выносить сюда - это api.
Слой pages представляет собой модули стриниц приложения.
Модуль страницы может использовать внутри себя widgets, components и services, а также большое количество бизнес-логики.
Логика страниц подвергается редактированию. Повторяющаяся логика выносится в composables.
Слой types является вспомогательным и используется для упрощения разработки.
Сюда выносятся все, что связано с глобальными типами и TypeScript в целом.