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

Question

[tdtdtd]

В докуметации Vuе, касаемо порядка слов в компонентах, выдвигаются рекомендации идти, начиная от более общего.
Т.е, есть у меня, к примеру страница User, на которой идёт несколько секций, About, Content, Posts.
И в итоге, компоненты выходят такие :

User
  -- UserSectionAbout.vue
  -- UserSectionContent.vue
  -- UserSectionPosts.vue

И есть одно НО. Это ситуация, в которой появляется необходимость создать общий компонент для всех этих секций, допустим что у них должен быть какой-то свой хедер. И собственно по логике вещей его нужно назвать SectionHeader, ведь это хедер принадлежащий секции, но в рез-те получается путанице в структуре.

User
  -- UserSectionAbout.vue
  -- UserSectionContent.vue
  -- UserSectionHeader.vue
  -- UserSectionPosts.vue

И уже с первого взгляда становится не особо понятно где компоненты отдельных секций, а где подкомпоненты для секции, ведь с ходу не будет ясно что SectionHeader это не секция под названием "Header", а хедер для секции.

Как можно переструктурировать всё это, дабы и не особо отдаляться от "вуёвых" рекомендаций, и визуальное восприятие стало более очевидным?

Answer 1

[Сергей delphinpro]

components/
    User/
        Header.vue
        Section/
            About.vue
            Content.vue
            Posts.vue

А имена самим компонентам соответственно отражаются из файловой системы

name: "UserHeader",
name: "UserSectionAbout",
name: "UserSectionContent",
name: "UserSectionPosts",

Comments

[tdtdtd]

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

[Сергей delphinpro]

tdtdtd, да пофиг. в User/ складываем общие компоненты для юзера. Секции группируются по смыслу — поэтому выделяем их в подкаталог

[Сергей delphinpro]

Если есть заголовок для всей страницы, он может быть уровнем выше. Где-то в PageHeader

[tdtdtd]

Сергей delphinpro, по итогу сейчас понял что вероятно будет проще просто отдалиться от вьюшных рекомендаций и сделать как-то так :

User
    UserSections /
      UserAboutSection
      UserContentSection
      UserPostsSection
      UserSectionHeader

Answer 2

[tvsjke]

По вашей логике должно быть так:

-- UserHeader.vue
-- UserSectionAbout.vue
-- UserSectionContent.vue
-- UserSectionPosts.vue

Как вариант, можно разнести все по папкам:

/User
  Header.vue
  /Sections
    Section1.vue
    Section2.vue

Comments

[tdtdtd]

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

Answer 3

[Виталий Пирогов]

Я бы разделил так:

/Components/
/Components/Users/
/Components/Users/About.vue
/Components/Users/Content.vue
/Components/Users/Header.vue
/Components/Users/Posts.vue