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

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

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


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

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


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

Как можно переструктурировать всё это, дабы и не особо отдаляться от "вуёвых" рекомендаций, и визуальное восприятие стало более очевидным?
  • Вопрос задан
  • 377 просмотров
Пригласить эксперта
Ответы на вопрос 3
delphinpro
@delphinpro
frontend developer
components/
    User/
        Header.vue
        Section/
            About.vue
            Content.vue
            Posts.vue


А имена самим компонентам соответственно отражаются из файловой системы
name: "UserHeader",
name: "UserSectionAbout",
name: "UserSectionContent",
name: "UserSectionPosts",
Ответ написан
@tvsjke
информация засекречена
По вашей логике должно быть так:

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

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

/User
  Header.vue
  /Sections
    Section1.vue
    Section2.vue
Ответ написан
@vikppok
JavaScript разработчик
Я бы разделил так:

/Components/
/Components/Users/
/Components/Users/About.vue
/Components/Users/Content.vue
/Components/Users/Header.vue
/Components/Users/Posts.vue
Ответ написан
Ваш ответ на вопрос

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

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