Предисловие:
Всем привет! Я верстальщик, верстаю уже 9 лет. За всё это время несколько раз пытался изучить js, абсолютно не получалось, интереса было ноль. Я начал больше углубляться в html/css, доступность, семантику и прочее. За всё время работы, я сделал для себя свой мини-фреймворк на базе сборщика TARS, в котором грамотно раскидывал всё по папкам и по файлам. Написал свыше 100 компонентов, которые можно из проекта в проект переиспользовать. 2-3 года назад начал дополнительно увлекаться ux/ui дизайном. Сейчас работаю как ux/ui дизайнер + верстальщик. Мы с другом back-end берем проекты на аутсорс и закрываем под ключ. Выполнили множество крупных проектов. Со временем понял что нужно всё таки чтобы стек технологии был фронт + back. А в нашем случае это vue + laravel. Так вот, я начал изучать vue и дается очень сложно. Особенно мне не даёт покоя как правильно раскидать файлы и вьюшки. Так как в VUE компонентный подход и как я понял это поломает всю мою наработанную структуру. Ниже я задам список вопросов, которые я не могу никак нагуглить, так как все уроки и примеры не особо парятся над этим.
Вопросы:
1) В TARS есть папка components, где создаешь папки с названиями компонентов типа button, checkbox, nav, header, footer и тд. Так же тут я себе создал помимо этого всего разные компоненты карточек, текстовых стилей, стилизованной загрузки файлов, модалок, дропдаунов и тд. Я думаю вы поняли о чем идет речь. Тут же я создаю уникальные компоненты для каких-то страниц типа about, team, contacts, servicies и тд. А теперь зная что во вью компонентный подход как правильно это использовать и раскидывать в сборщиках vue?
2) Есть папка scss. В нем как вы поняли хранятся все стили. Есть main.scss вид которого:
/*!
* Quasarify v1.0.0
* Copyright 2022 Kulseitov.kz
* Licensed under MIT Open Source
*/
// Configuration
@import "functions";
@import 'variables';
@import 'mixins';
@import "utilities";
// Layout
@import 'root';
@import 'normalize';
@import 'fonts';
@import 'base';
@import "containers";
@import "grid";
// Plugins
@import 'plugins';
@import 'plugins-reset';
// Components
@import 'components';
// Helpers
@import 'helpers';
// Utilities
@import "utilities/api";
Будет ли такой подход работать во vue? То есть что я имею ввиду. Я видел исходники некоторых проектов, они там внутрь каждого компонента вверху пишут импорт только конкретного компонента. На странице используются кнопки, модалки и карточки то вверху надо подключать import button, card, modal. Так это работает? Во Вью компонент - это не button, card и тд это именно скрипты? Как тогда в папке разделять/называть папку components - которая в привычным смысле значит компонент и компоненты vue?
3) Обычно я все плагины, библиотеки раскидываю по определенным папкам. То есть js файлы библиотеки в папку js/libraryName, css/scss файлы в папку scss/plugins/pluginName. Js файлы склеиваются автоматом а scss я подключаю вручную в файле plugins.scss. Так же создаю plugins-reset.scss. Почему так? Потому что часто я переписываю/переопределяю некоторые стили библиотеки в переменных под себя. А в VUE, React фрейморвках всё тянут из node_modules. Как быть в таком случае, как держать постоянно у себя эти кастомизированные либы?
Вопросов ещё куча, но это базовые) Возможно всё гораздо проще, просто я не видел нормального проекта с хорошей структурой.
