Vueist
904 subscribers
15 photos
38 links
Vue шитпостинг, желтуха, советы и мысли

Дополнительный канал к @zede_code от @zede1697
Download Telegram
Channel created
Channel photo updated
И первая тема которую я подниму: Как учить Vue в 2025?

Тема обширная, зависит от кучи параметров и особенностей.
Но я выделю главное: у Vue отличная документация! Однако изучать ее нужно тоже верным образом

1. Первое что нужно запомнить. Документация это https://vuejs.org и перевод на русский https://ru.vuejs.org(если вам комфортно с другим языком, то используйте соответствующие ссылки с этими языками). Внимательно запомните эти 2 ссылки. Если вас поиск в сети выводит на другие документации (особенно на русском), то вы попали не туда (исключение библиотеки экосистемы Vue, тут понятное дело вы будете на их сайтах).
2. Старайтесь по возможности придерживаться оригинала, те английской версии. Переводы могут иметь свои искажения или отставания, от этого никуда не деться
3. Запомнить основные разделы доки: туториал, гайды, документация API, глоссарий, стайл гайд. Остальное это уже мелочи
4. Не стесняйтесь пользоваться плейграундом при изучении или особенно когда у вас есть вопрос который бы вам хотелось задать в сообществе. Это проще и быстрее чем разворачивать StackBlitz и тп и гораздо быстрее дает понять что вам нужно.
5. Актуален сейчас именно Composition API. Следите за этим моментом, особенно если попадаете в документацию из ссылки поисковика

Отлично. Можем начинать изучение
1. Вам нужно пройти туториал на сайте. Он покрывает только самую базовую базу и займет у вас в зависимости от навыков от пары часов до 1-2 дней. Пожалуйста, не трогайте настройки. Вам нужно использовать только Composition и SFC вариации (либо вы попадаете в пару процентов кто ВЫНУЖДЕН использовать что-то другое, но вы и так это бы знали). Эта часть проходит полностью на сайте и вам не требуется что-то у себя настраивать
2. Отлично, вы получили базовую базу, что дальше? Дальше начинаем изучение по секции гайды. Тут правило простое: идите сверху вниз и не ошибетесь, если возникает потребность то можете прыгнуть и в другое место.
2.1. Вы дошли до момента создания приложения у себя на компьютере. Тут как и в доках простой ответ: npm create vue@latest. Далее следует выбор вариантов.
- Начинать ли с TS момент спорный, если вы пришли с другого фреймворка и с TS у вас ок, то можете сразу стартовать с ним. Если же вы новичок и теряетесь даже в основах при работе даже с JS, то лучше придержать TS до момента, когда вам будет комфортно использовать Vue и без него (чтобы не мучаться и не распыляться в изучении)
- JSX. Однозначно первое время лучше отказываться от него, даже если вы реактер, который не представляет себя без JSX, вас будет это отвлекать от изучения Vue, так как дока не адаптирована к JSX пользователям. Поэтому как и с TS оставьте JSX на потом, а может вы привыкните к SFC и возвращаться не захочется
- Router. Для первого проекта - нет
- Pinia. Для первого проекта - нет
- Vitest. Для первого проекта - нет
- E2E tests. тоже лесом.
- ESLint - ОДНОЗНАЧНО ДА. Это буквально самая важная часть, включите его и сразу идите конфиг и врубайте вместо essentials - recommended пресет. Это вас будет приучать с первых минут к vue-way разработке и убережет от большого количества ошибок новичков
- Prettier - для первого проекта я бы не включал. Там есть свои особенности, лучше слегка попридержать. В последствии будет зависеть от ваших вкусов
- Vue devtools extension - попробуйте, почему бы и нет. А вот к браузерным Devtools я бы точно попробовал приспособиться, если вам будет комфортно и без них, то ваше право
2.2 Отлично, пресет для первого проекта есть. Выберите себе любой проект и реализовывайте. Если фантазия подводит, то просите ИИ-агента помочь вам выбрать идею для первого проекта, работает неплохо.
2.3 Вы должны пройти весь Vue essentials блок гайдов и сочетайте по необходимости с блоком Components in Depth.
2.4. Я не зря упоминал блок глоссарий. Он специально создан для разъяснения терминов. Пользуйтесь
2.5. Не стесняйтесь обращаться за разъяснением сложных и непонятных моментов в чаты по Vue: @vuejs_ru / @vuejs_club (не забывайте о использовании плейграунда по необходимости)
👍17🔥65🏆1
3. Поздравляю, вы освоили некоторую базу и вам нетерпится расширять свой кругозор в мире Vue. Можете начать с подключения Vue Router и UI библиотек на свой вкус. Далее присмотритесь к vueuse большую часть рутины оно прекрасно покрывает, но старайтесь читать исходники того что используете, это сильно ускорит ваш прогресс. Далее подключаем Pinia как стейт менеджер, он не мастхэв, но знать для работы лишним не будет.

4. Вы вполне неплохо освоились во Vue. Теперь можете спокойно пробовать работать с SSR, например Nuxt. Знакомство до этого момента принесет вам много боли, поэтому я специально отложил этот пункт. Также вы теперь достаточно опытны, чтобы погружаться в глубины Vue. Заходите на API и погружайтесь в незнакомое.
2.6.

Вот такой пока получился путь для самостоятельного изучения Vue. Да он не покрывает и 60% всех возможных рекомендаций, но это точно скелет которого я бы хотел чтобы придерживались и остальное шло к нему опциями.
Буду рад ответить на ваши вопросы по данному роудмапу

FAQ:
Брать ли курсы по Vue - я не вижу в этом смысла. Большая часть того что на ютубе либо устарела, либо еще какие причины могут сильно подпортить знакомство (уровень автора, навыки преподавания, сомнительные практики и тд)

Обучаться с AI. Я бы не стал четко общаться с ИИ для изучения Vue, она частенько пытается откатиться к устаревшему API которое есть у нее в базе, либо делает выводы на его основе. Если вам очень хочется, то обязательно уточняйте Vue3+Composition API. Я еще попробую составить гайды по изучению Vue в паре с AI в будущем

Кого можно смотреть для качественного контента по Vue? Сложный вопрос. Я пока над ним думаю. Старый но мега крутой контент у Ильи Климова, на этом я бы пока закончил
👍26🔥9🎉1🏆1👨‍💻1
Какие библиотеки использовать со Vue?
Тоже частый вопрос это стек относительно мира Vue.

Попробуем накидать базовый стек для нового среднего Vue3 проекта в 2025

1. vue-router - официальный роутер в мире Vue. Очень стабильный, простой в использовании и удобной интеграцией в devtools. Пропитан реактивностью и в целом покрывает львиную долю задач.
1.1 официальное развитие идеи роутера unplugin-vue-router от самого автора vue-router. Главное это возможность работы в Nuxt-like стиле file-based routing. Также есть фичи которые экспериментальны для vue-router: дата лоадеры, типизация роутов. Не рекомендую для первых проектов
1.2 Альтернативный роутер. Да-да если вам нетерпится то Vue никак вам не навязывает сосуществование только с родным роутером: kitbag,

2. Стейт менеджмент: Pinia. Официальный и крайне простой стейт менеджер для Vue. Изучается быстро, настройки минимальны. Знаешь Vue = знаешь Pinia.
2.1 Vuex - официально устарел и pinia его продолжатель. Поэтому если вам попадаются уроки связанные с Vuex, то можете их закрывать
2.2 Обязателен ли стейт менеджер? Нет, vue спокойно работает и без них на основе своей мелко-зернистой реактивности и композаблов. Единственное что вам будет чуть сложнее с HMR и интеграцией с Devtools. Также может оказаться сложнее такие решения дружить с SSR, поэтому тут выбор остается за вами, но на рабочих проектах шанс встретить pinia крайне высок
2.3 Рекомендую использовать вариант с setup-like сторами, а не options api like.

3. ESLint Plugin Vue. Писал и буду писать, что пока вы начинающий то это MUST HAVE. Почти всегда на тестовых заданиях именно отсутствие привычек выработанных vue гайдлайнами выдают неопытного разработчика, поэтому ставьте его себе без вариантов.
3.1 Плагин предоставляет несколько пресетов, вы должны использовать вариант с recommended. Он гораздо более жесткий чем по-умолчанию essentials.
3.2 Там еще множество опций есть которые возможно настроить. Неплохо пробежаться по ним если вы планируете проект для множества людей, так как он позволяет закрепить некоторые варианты использования Vue едиными на проекте (например запретить style scoped или скрипты без ts)
3.3 Prettier. Оставляю выбор за вами, мне комфортно и без него, но много кому он очень нравится. Но первый проект как и писал лучше обойтись без него

4. Vue Devtools. Рекомендую как минимум ознакомиться и понять какие проблемы он может вам решить. В целом не супер обязательная штука, многие и без них чувствуют себя комфортно. Но как по мне они часто экономят тонну времени при дебаге или изучении новых проектов

Далее идут сугубо опциональные части на ваш выбор:
5 VueUse для устранения большей части рутины связанной с логикой vue. По сути это lodash для мира реактивности Vue. Много полезного и бесполезного. В любом случае можно читать исходники и забирать себе отдельные композаблы в виде кода при желании.
6 tanstack/query vue - Не рекомендую ставить в первое время, Vue в общем случае и так позволяет легко использовать API для запросов. После того как почувствуете плюсы и минусы можете пробовать и ее. В целом же это библиотека для управления асинхронным удаленным стейтом (например данные сервера). Кстати альтернативой может послужить Pinia Colada от создателя Pinia.
7 Если нужен SSR, то это Nuxt или vike. Вы можете и попытаться сами написать свой SSR на Vite
8 Выбираем ui либу на свой вкус. Выбор достаточно большой и думаю заслуживает отдельного разбора. Но стабильным выбором для погружения: primevue(золотая середина по гибкости и изкоробочности), quasar(более old style подход, но большая и стабильная), shadcn(неофициальный порт shadcn react). В целом со списком базовым набором актуальных UI библиотек можно ознакомиться тут.

Это основные части которые могут понадобиться в большинстве проектов. Конечно тут мы не захватили еще работы с валидациями, формами, иконками и много еще чем другим, но обязательно сделаем это в других постах отдельно, но если есть пожелания или считаете, что я забыл что-то подсветить, то обязательно укажите мне это в комментариях
29🔥24👍13