Тонкости Vue.js или как показать тимлиду, что вы приручили Vue.

Добрый день всем. Хочу вам немного рассказать о том, как я умудрился выделиться из толпы людей, пытавшихся получить работу Front-end разработчика на Vue.js и показать, что я лучше всего подхожу на эту должность.

Немного о ситуации: недавно я проходил собеседование в Европейскую фирму. Обычно в г. Братислава (Словакия) очень большая конкуренция и если вам уже после подачи вашего резюме позвонили - это уже большое счастье. Я же умудрился дойти до той стадии, где мне выдали тестовое задание и сказали подготовить его к определенной дате чтобы я мог пройти во второй этап собеседования. И вот тут я хочу рассказать вам о тех решениях и маленьких фишках, которые дают понять тимлиду, что вы понимаете что делаете и даже сами можете чему-то научить.

И так, проект на Vue-CLI, Vuex обязателен (если в вашем проекте нет данных - смысл использовать именно Vue, верно?), vue-router также нужен по той же причине. Поставив препроцессор (SCSS) я вам покажу небольшой трюк с тем, как можно писать CSS код, вероятно некоторые об этом не знали, а если вы прожженный Senior разработчик, то я не понимаю что вы тут забыли. Все остальные настройки по желанию.

Вот он, наш стартовый проект - давайте начнём сразу с настройки:

выберите для себя основные компоненты, которые очевидно нужно отделять логикой и данными. К примеру: модальное окно с какими-то данными, какое-то небольшое окно справа вверху для вывода ошибок, поиск по системе итд. После логичного отделения нужно создать не только соответствующие компоненты и всё разделить, это очевидно, но и создать разные модули во Vuex - под каждый компонент с данными свой модуль. А в index.js (главный файл под Vuex) собирать все модули в одно целое.
сразу можете создать компонент под вывод ошибок. В реальном проекте редко когда приходиться делать такой функционал (на моём опыте), но его реализация может вам помочь найти разного рода исключения и обработать их, а также показать тимлиду, что вас не так уж и просто застать врасплох выходом за стек или каким-нибудь исключением деления на ноль.
если вы не используете фреймворк под CSS (какой-нибудь TailWindCSS), тогда лучше позаботится о том, чтобы ваши компоненты не были переполнены повторяющимся CSS кодом. Поэтому лучше создать в assets отдельную папу под общий CSS код и вынести туда главные стили.
всегда проверяйте чтобы в dependencies не лежал jquery. Очень чатсо такое можно встретить когда люди ставят Bootstrap. Сейчас 5 Bootstrap переписан под ванильный JavaScript и jQuery не нужен.

С стартовой настройкой я закончил, теперь хочу поговорить об общих моментах при написания вашего проекта, которые дадут понять, что вы не просто пишите рабочий код, а пишите рабочий, масштабируемый, понятный, чистый код.

Начну с интересного. Под SCSS есть крутая фишка, которую мало кто знает (как мне кажется) и ее использование 50 на 50 может удивить смотрящего. "А так можно?"

.mymodal{ 
    position: fixed; 
    width: 75%; 
    height: 80vh; 
    background-color: #fff; 
    padding: 30px 60px; 
    &__close{ 
        position: absolute; 
        top: 15px; 
        right: 25px; 
        font-size: 24px; 
        cursor: pointer; 
    }
    &__info{ 
        margin-left: 30px; 
    } 
    &__picture{ 
        width: 50%; 
        height: 80%; 
        margin: auto; 
        background-position: center; 
    }
}

Думаю, понятно во что компилится данный код. (.mymodal, .mymodal__close, .mymodal__info, .mymodal__picture)

Ваш компонент ВСЕГДА должен быть чистым и легко читаться. Если вы видите, что он выглядит перенасыщенным - значит вы где-то упустили несколько дополнительных компонентов и что-то нужно вынести в отдельный файл. В идеале не больше 200 строк (за редким исключением).
!Важно! Vuex используется не только для хранения данных во время работы с приложением. Туда переносится вся логика, все мутации данных, а в компоненте вам нужно отслеживать события и отправлять данные мутировать во Vuex, а потом их только принимать. То есть зачастую у вас в компоненте будут только mapGetters и mapMutations.
В props компонента обязательно указывайте тип данных, их важность и значение по умолчанию. Это вас обезопасит от разного рода неожиданностей.
Если данные идут с сервера - желательно подключите какой-то очень простой loader. Это мелочь и она не займёт и 10 минут, но разве красота не в мелочах?
Следите за логикой в ваших папках и файлах. Если у вас есть компонент поиска, фильтрации и сортировки - вы можете создать отдельную папку под них и вынести их туда дабы не плодить папки с 20-30 файлами. В этом ничего особо плохого нет, но повторюсь, разве красота не в мелочах?
По началу проекта создайте репозиторий и комитте туда этапы разработки. Так тимлиду будет виднее развитие вашего проекта. Не забывайте про Git-Flow (или другие методологии разработки). Может для столь маленького проекта он и не нужен, но вы покажите, что знаете его.
Если умеете в тесты - то было бы неплохо написать несколько.
Оставляйте за собой чистый код и комментарии к сложным частям кода. Глаз радуется когда видишь вот такую картину.

<Post 
    :key="n"
    :title="post.title" 
    :text="post.text" 
    :picture="post.picture" 
    :price="post.price" 
    :raiting="post.raiting" 
    :id="post.id" 
/>

вместо

<Post :key="n" :title="post.title" :text="post.text" :picture="post.picture" :price="post.price" :raiting="post.raiting" :id="post.id" />

Не оставляйте за собой комментированный код, если в этом нет необходимости. Удаляйте все куски, которые вы оставили: "а может потом понадобится". Не понадобится.
Если есть время - подумайте над тем, как можно ускорить ваш код. Оптимизация наше всё.
Напишите небольшую доку о том как развернуть ваш проект

И так, набор тонкостей и мелочей позволит вас выделить в толпе. Используйте все свои навыки чтобы показать, что вы умеете и что вы не просто пишите код, а знаете своё дело.

Пишите только чистый и понятный код.