Как лучше организовать структуру проекта на vue?

Question

[reinmaker90]

Доброго дня, подскажите best practices как организовать структуру папок в проекте, к бекэнду проекта нет вопросов, возник вопрос как верно организовать структуру фронта ,как группировать файлы js,css , пока нашел для себя только BEM flex.
Проект средний до 1000 часов разработки.
Стек laravel + vue

Comments

[0xD34F]

ДД

"Дебилы драные"? "Дайте денег"? "Демократизация Дагестана"? "Директор дурдома"? "Доширак дороговат"?

[reinmaker90]

0xD34F, Добрый день)

[0xD34F]

reinmaker90, да это понятно. Вы бы перестали правила (3.4) нарушать.

[reinmaker90]

0xD34F, не читал, более не будет подобного

[Сергей delphinpro]

[reinmaker90]

Сергей delphinpro, А если у меня будет скажем 200 компонентов vue, плюс еще пару десятков файлов разметки и столько же js и css, куда это?
У вас как я понял дефолтная структура, она наверное не подходит для такого количества компонентов

[Сергей delphinpro]

reinmaker90, Это уже внутренняя структура отдельных папок components, pages и layout.

CSS файлов у меня мало, они все уживаются в папке css/. Там только глобальные стили. Всё остальное в vue-файлах. Если компонент объемный, то я превращаю его в папку и делю на три файла - шаблон, скрипт, стиль.

Javascript - это чаще всего утилитарные функции, они живут в utils, сгруппированные по назначению в отдельных файлах. Если проект относительно крупный, то иногда добавляется папка service для различных классов не компонентов, например User.

Самый геморрой - это с компонентами. Их реально бывает много. Ну как-то группируются внутри components.

Answer 1

[Василий Банников]

Стек технологий не указан, так что скажу в контексте реакта, как делаю я.
Я кладу стили рядом с кодом компонента, в котором они используются. А общие стили кладу в более общую папку на пару уровней выше.
Для чистого HTML/CSS/js, думаю, можно применить аналогичный принцип.
Ту и тесты тоже должны быть рядом с тестируемым кодом

Comments

[reinmaker90]

проект на laravel + vue

[Василий Банников]

reinmaker90, на vue я бы использовал single-file components. И поделил бы всё приложение на экраны/страницы и на самостоятельные компоненты. Но я не уверен, тк на вуе полноценно ещё ни разу не писал.

[Василий Банников]

reinmaker90, посмотри это: https://github.com/ericfennis/vue-structure
и это: https://sandoche.medium.com/how-to-structure-a-vue...