Как структурировать и систематизировать компоненты?

Не мог я нарадоваться что благодаря Вью могу отказаться от придурошного БЭМа и мучений с неймингом, который я не выношу, так столкнулся с другой проблемой. Как организовывать файлы компонентов?

Как-то не очень прикольно иметь 200 файлов в одной папке. Официальный стайлгид касается только названий файлов, а не их логической организации. Это немного помогает, но вопрос не о названии файлов.

Например, есть такие компоненты:

FullscreenMenu.vue
FullscreenNav.vue
FullscreenOverlay.vue
Logo.vue
MainNav.vue
TheHeader.vue
TheFooter.vue
AppInput.vue


Почитав нагугленные рекомендации, я пока остановился на таких папках:

1. layout для компонентов которые используются один раз, например TheHeader.vueTheFooter.vue

2. ui для компонентов элементов интерфейса, из данного примера AppInput.vue

Также есть совет дял компонентов вроде
FullscreenMenu.vue
FullscreenNav.vue
FullscreenOverlay.vue

создать отдельную папку, но мне такая организаци не нравится.

И куда класть Logo.vue? Его я могу юзать не только в TheHeader.vue, а по всему приложению.

Кроме того, непонятно, куда тогда пихать MainNav.vue? Это навигация из TheHeader.vue и она тоже используется 1 раз, но имхо ей в layout делать нечего...

Короче, хаос.

Как вы делаете?
  • Вопрос задан
  • 1840 просмотров
Решения вопроса 1
Если MainNav используется 1 раз в хедере, то почему не назвать это HeaderNav?

К чему я склоняюсь(и как мне кажется нас склоняет vue style guide):
- разделить основные страницы и сущности в них(компоненты)
- страницы класть в папку pages или layouts, компоненты класть в папку components
- при этом страницы могут содержать бизнес логику такую как запросы к API или работа со store, компоненты же должны быть максимально чистыми и реюзабельными(представьте что в компонентах вы пишите общедуступную UI библиотеку)
- в пейджах не обязательно создавать никаких папок(хотя если это nuxt то ок), в компонентах же наоборот следует создать папки с теми сущностями которые мы выделили в п.1. Тоесть есть у нас есть сущность/секция хедер, на выходе мы имеем:
Header
---Header.vue
---HeaderNav.vue
---HeaderNavItem.vue
---HeaderAuth.vue
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
CyberAP
@CyberAP
Фронтенд разработчик
Попробуйте разделить компоненты по их сути:

1. Атомы\блоки - неделимые компоненты, части других компонентов с минимальным набором характеристик. Выполняют одну единственную задачу.
2. Контейнер - компоненты, которые появляются один раз на странице. Шапка, футер, навигация, это всё сюда.
3. Самостоятельные компоненты - сгруппированные компоненты, отражающие суть задачи, которую они решают.

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

atoms
--button
--textInput

container
--header
--footer
--mainNav

layout
--columns
--grid
--inline

overlays
--overlay

users
--userName
--userAvatar
--userItem

От БЭМ совсем отказываться не стоит, он сэкономит вам кучу времени когда нужно будет что-то поменять в компонентах через месяц и больше.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы