Приветствую! Мой вопрос направлен разработчикам всех фреймворком (Vue, React, Angular ...), поскольку касается архитектуры и нейминга компонентов.
В своих пет проектах сталкиваюсь с подобным, но решаю, думаю, неправильно, вот думаю узнаю, есть ли какая-то конвенция или best practices как это делать.
Моделирую пример: Есть сайт. Есть страница пользователя. У пользователя большое количество информации, которая поделена на блоки. Условно я бы сделал так:
src/pages/UserPage.vue — основная страница пользователя.
src/components/UserAvatar.vue
src/components/UserFio.vue
src/components/UserEducation.vue
src/components/UserWorks.vue
Всё это компоненты, которые на станице пользователя отображаются блоками. Тут вроде всё ясно.
Но! Надо мне сделать страницу добавления пользователя. Как бы делал я, и как делал в своих реализованных проектах:
src/pages/UserPageAddEdit.vue — страница добавления и редактирования пользователя. (Добавление и изменения объединяю, разница лишь в том, что для добавления будут пустые props с default значением, а в edit будет передаваться props).
На этой страницы я бы сделал единый компонент:
src/components/forms/UserAddEditForm.vue —Этот компонент был бы формой-обёрткой, в котором бы было пошаговое добавление блоков информации. Условно блок добавления ФИО:
src/components/UserFioAddEdit.vue (либо вообще я бы назвал этот компонент UserAddEditStepOne.vue, потому что может у меня будет там и StepTwo где не будет единого четкого названия группы информации, будь то education или works)

или

И вот вопрос. Мне кажется, что все это не правильно в нейминге. Как-то надо более правильно это упорядочивать, называть и пр. Как правильно это организовывать?