Повний курс з Vue [Pinia, Vitest]: Від нуля до Майстра

Цей курс з Vue призначений для максимальної ефективності вашого навчання. Забудьте про заплутані, застарілі та неповні уроки та скористайтеся можливістю створювати витончені, професійні додатки на Vue 3.

Крім того, ви навчатиметеся поряд з активною та підтримуючою спільнотою.

Випускники Zero To Mastery успішно отримали посади в компаніях найвищого рівня, таких як Google, Tesla, Amazon, Apple, IBM, Uber, Facebook і Shopify, серед інших.

Багато хто процвітає як затребувані фрілансери, працюючи віддалено з усіх семи континентів.

І ви абсолютно можете бути одним з них.

Підписавшись сьогодні, ви отримаєте доступ до нашої ексклюзивної онлайн-класної кімнати, де тисячі студентів, випускників, наставників, асистентів викладачів та інструкторів обмінюються знаннями і співпрацюють.

Динамічна. Підтримуюча. Надихаюча. Дружня. Незамінна.

Це лише кілька слів, якими студенти описують спільноту ZTM у Discord, одну з найбільш активних мереж розробників у Discord.

Найголовніше, що викладатимуть вам індустріальні професіонали з реальним досвідом роботи над Vue і створення великих додатків для компаній у Торонто та Силіконовій долині.

Цей практичний курс занурить вас у сучасний набір інструментів розробника Vue на 2024 рік і проведе вас через кожен крок запуску професійного проєкту на Vue у продакшн.

Ваш випускний проект полягатиме у розробці повноцінного музичного програвача на зразок Spotify, використовуючи Vue, Pinia (новішу версію Vuex), Vue Router, Composition API, Firebase, Vitest, Sass та інші технології.

Весь код ретельно надається покроково, і якщо ви не бажаєте кодувати разом із нами, ви отримаєте повний доступ до всього майстер-коду проекту, що дозволить вам миттєво включити його до свого портфоліо.

Ось детальний опис того, що охоплює цей курс, проводячи вас від нуля до майстерності у Vue:

Ми почнемо з основ та необхідних концептів Vue, а потім перейдемо до більш просунутих тем, даючи вам знання для прийняття обґрунтованих рішень щодо архітектури та інструментів для ваших майбутніх проектів на Vue.js.

Ви закохаєтеся у Vue, незалежно від того, чи ви новачок у фронтенді або переходите з React чи Angular!

1. ОСНОВИ - Вивчіть фундаментальні поняття Vue, включаючи обчислювані властивості, методи та спостерігачі. З цими основними концепціями ви зможете ефективно маніпулювати документами через події, прив'язку та умовну візуалізацію. Також ви дізнаєтеся про техніки налагодження за допомогою офіційних інструментів розробника Vue.

2. ПРОЕКТ: ІГРОВИЙ МАЙДАНЧИК ПЕРСПЕКТИВИ - Вашим першим проєктом стане ігровий майданчик з CSS-перспективами. Ця вправа закріпить засвоєні основні концепції, надаючи зручний інструмент для візуалізації того, як CSS-властивості змінюють перспективу елементів.

3. ГЛИБОКЕ ЗАНУРЕННЯ У VUE - Досліджуйте тонкощі фреймворку Vue. Дізнайтеся про те, як JavaScript-фреймворки реалізують реактивність та як Vue перетворює шаблони на об'єкти віртуального DOM. Ця секція висвітлить можливості фреймворку Vue для сучасних додатків, включаючи обговорення життєвих циклів та компонентів.

4. ІНСТРУМЕНТИ - Ми ще раз розглянемо кілька важливих інструментів для розробки додатків. По мірі просування у кар'єрі вам потрібно буде освоїти інструменти, що полегшують розробку (наприклад, Vite, Sass, PostCSS, ESLint). Ми розглянемо налаштування та важливість цих інструментів.

5. ПРОСУНУТІ КОМПОНЕНТИ - У цьому модулі ми ініціюємо проєкт на Vue з Vite. Vue створений для спрощення процесу розробки, полегшуючи такі завдання, як створення проектів та запуск серверів. Ми безпосередньо працюватимемо з компонентами, досліджуючи архітектуру через властивості, події, слоти та динамічну візуалізацію.

6. АНІМАЦІЇ ТА ПЕРЕХОДИ - Дізнайтеся, як оживити свій додаток, впровадивши переходи та анімації. Ці покращення вдихають життя у додатки та покращують взаємодію з користувачем, надаючи зворотний зв'язок на їхні дії. Ми дослідимо, як реалізувати анімації за допомогою CSS та JavaScript, включаючи використання найновішого API для анімацій у вебі.

7. ПРОЕКТ: ДОДАТОК ДЛЯ ВІКТОРИН - Застосуйте знання, набуті раніше, для створення додатку для вікторин, універсального інструменту, який використовують у різних індустріях.

8. МАЙСТЕР-ПРОЕКТ: ЗНАЙОМСТВО З PINIA - Починайте роботу над майстер-проєктом - музичним додатком (на кшталт Spotify)! Завантажуйте, керуйте та насолоджуйтеся своєю музикою з використанням TailwindCC для покращеного сучасного дизайну. Ми підійдемо до проблеми управління станом за допомогою офіційної бібліотеки стану Pinia, нащадка Vuex.

9. МАЙСТЕР-ПРОЕКТ: ВАЛІДАЦІЯ ФОРМ - Реалізуйте надійну валідацію форм для запобігання неправильним даним, переконуючись, що помилки ловляться на ранніх етапах.

10. МАЙСТЕР-ПРОЕКТ: АВТЕНТИФІКАЦІЯ - Додайте автентифікацію користувачів і реєстрацію, дозволяючи їм логінитися одразу після створення акаунту. Firebase буде нашим бекенд-рішенням для управління користувачами та їх перевірки.

11. МАЙСТЕР-ПРОЕКТ: МАРШРУТИЗАЦІЯ - Використовуйте бібліотеку Vue Router для управління переходами між сторінками, застосовуючи API історії для плавної навігації. Дізнайтеся, як захищати маршрути, використовувати метафайли та налаштовувати зовнішній вигляд сайту залежно від маршруту.

12. МАЙСТЕР-ПРОЕКТ: ЗАВАНТАЖЕННЯ ФАЙЛІВ - Реалізуйте завантаження файлів на Firebase з перевіркою для запобігання завантаженню небажаних файлів. Ми також розглянемо зберігання інформації в базах даних і забезпечимо резервне рішення для тих випадків, коли перетягування не підтримується.

13. МАЙСТЕР-ПРОЕКТ: ПРОГРАВАЧ АУДІО - Розробіть програвач аудіо з функціями відтворення/паузи, прокручування та відстеження тривалості треків. Ви також покращите взаємодію з користувачем, додавши можливість коментування треків, перегляду музики та сортування даних.

14. МАЙСТЕР-ПРОЕКТ: ДИРЕКТИВИ - Досліджуйте створення власних директив — атрибутів, що розширюють елементи додатковими властивостями та методами. Ми вивчимо як основні, так і просунуті концепції директив, включаючи модифікатори та аргументи.

15. МАЙСТЕР-ПРОЕКТ: ІНТЕРНАЦІОНАЛІЗАЦІЯ - Підготуйте свій проєкт для підтримки кількох мов, розглядаючи різні техніки для перекладу. Навчіться форматувати і перемикати мови у своєму коді без проблем.

16. МАЙСТЕР-ПРОЕКТ: PWA - Оскільки веб-дизайн переходить на мобільні пристрої, ви впровадите функціональність прогресивних веб-додатків (PWA), покращуючи мобільну сумісність вашого додатку за допомогою Workbox для кешування файлів та збереження даних у Firebase.

17. МАЙСТЕР-ПРОЕКТ: ОПТИМІЗАЦІЯ - Завершіть коригування перед тим, як ввести свій додаток у продакшн. Ми дослідимо різні техніки для оптимізації додатку з використанням Vite для розбиття файлів і легкої реєстрації компонентів, покращуючи взаємодію з користувачем під час завантаження.

18. МАЙСТЕР-ПРОЕКТ: ДЕПЛОЙМЕНТ - Введіть свій додаток у продакшн із використанням Vercel усього за одну команду! Це просто та швидко.

19. МАЙСТЕР-ПРОЕКТ: ТЕСТУВАННЯ - Навчіться стратегіям тестування свого проєкту за допомогою Vitest. Оволодійте модульним тестуванням для ізоляції функцій, вирішення проблем за допомогою мокінгу, а також прогресуйте до тестування знімків і кінцевого тестування для повного розуміння.

20. COMPOSITION API - Познайомтеся з останньою функцією Vue - Composition API. Цей інноваційний підхід до створення компонентів вирішує попередні обмеження, пропонуючи переконливу альтернативу. Ми розглянемо переваги та причини впровадження цього API.

Що можна винести?

У підсумку, цей курс представляє собою всебічний буткемп з Vue.

Однак, ми не підтримуємо механічне кодування без розуміння концепцій. Наша місія - підняти вас з повного новачка до рівня серед топ-10% розробників на Vue 💪.

І найголовніше, ризиків нема. Почніть вчитися вже сьогодні, і якщо курс не виправдає ваших очікувань, ми запропонуємо вам 100% відшкодування протягом 30 днів — без зайвих питань і проблем.