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

Question

[wakenby]

1) В styleguide vue сказано что компоненты должны быть описаны 2-3 словами для избежания коллизий с html тегами, и у меня возникла проблема с Footer.vue. Можно ли назвать сам компонент(Файл) AppFooter.vue? или в таких случаях лучше называть компонент Footer.vue(Без App) а при импорте в другом компоненте добавлять префикс app:

import appFooter from "@/components/Footer";

2) Как лучше называть компоненты? Сам vue при развертывании проекта называет все компоненты с большой буквы. Но я видел что некоторые люди пишут с маленькой буквы и с префиксом v-, но в документации не нашел про это. Норма ли писать компоненты с маленькой буквы и с префиксом v- и где про это можно прочитать?



3) Как быть с компонентами к которым сложно придумать название из двух слов? Для них можно использовать префикс app? Например вот так:

Comments

[Алексей Ярков]

И в чём проблема?

[wakenby]

Алексей Ярков, Случайно опубликовал вопрос в начале описания, отредактировал))

[tantumus21]

1) если компонент у вас уникальный, без вариантов, то называйте, например, TheFooter.vue. Насколько я знаю, уникальные компоненты называют через The
2) использовать префикс в названии - вряд ли хорошая идея
3) смотрите пункт 1

Answer 1

[Алексей Ярков]

Можно ли назвать сам компонент(Файл) AppFooter.vue?

Да, вполне себе нормальное название. В целом надо соблюдать правило, чтобы имя компонента не совпадало с существующими html тегами.

или в таких случаях лучше называть компонент Footer.vue(Без App) а при импорте в другом компоненте добавлять префикс app

И зачем эти трудности? Называйте сразу AppFooter.

Сам vue при развертывании проекта называет все компоненты с большой буквы. Но я видел в видео что некоторые люди пишут с маленькой буквы

ИМХО это от кодстайла в проекте зависит. Как удобно - так и пишите. Я лично предпочитаю с большой буквы. VSCode тогда выделяет другим цветом и проще глазом ориентироваться в разметке.

Норма ли писать компоненты с маленькой буквы и с префиксом v- и где про это можно прочитать?

Где почитать не знаю, но добавлять префиксы вряд ли стоит. Это делают при разработке каких-то UI библиотек, чтобы однозначно понять, что компонент относится к ним. Например у Vuetify это v-, у BootstrapVue это b- и так далее.

Comments

[wakenby]

Спасибо большое! Еще раз задам глупый вопрос:

Если сложно придумать название из двух слов, то можно просто добавить префикс App перед названием компонента чтобы он не совпадал с html тегом и это будет правильно:



Вот тут все правильно? Тут не нарушается единый стиль? Мне просто в глаза бросается App, что у footer есть префикс App, а у других компонентов нет

[Алексей Ярков]

wakenby, да, вполне нормальный способ

[Сергей delphinpro]

wakenby, Это какой подвал? Глобальный на странице? Можно так и назвать PageFooter / GlobalFooter / LayoutFooter. AppFooter тоже норм. Чаще так и называю.
Что вы так заморачиваетесь с именами?

[profesor08]

wakenby, навбар в отдельную папку, туду в отельную