Kategoria: JavaScript, programowanie front-end, frameworki JS
O szkoleniu
Trzy dni praktycznej pracy z Vue.js w takiej postaci, w jakiej używa się go dziś w projektach komercyjnych: Composition API, TypeScript, Vite, Vue Router i Pinia. Uczestnicy budują przykładową aplikację krok po kroku — od pierwszego komponentu, przez routing i stan aplikacji, po komunikację z API, testy i build produkcyjny.
Po szkoleniu:
- zbudujesz aplikację z komponentów jednoplikowych z użyciem Composition API,
- zaprojektujesz przepływ danych między komponentami (props, emits, sloty, composables),
- skonfigurujesz routing i stan aplikacji w Vue Router i Pinia,
- połączysz aplikację z API, z obsługą ładowania i błędów,
- napiszesz testy komponentów i będziesz wiedzieć, jak sprawdzać kod generowany przez asystenta AI.
Szkolenie opiera się na aktualnej wersji Vue — przy okazji pokazujemy, jak czytać starszy kod (Options API, Vuex), z którym wiele zespołów wciąż pracuje.
Szkolenie jest dla programistów, którzy pracują albo będą pracować z aplikacjami w Vue: front-end developerów przechodzących z Reacta lub Angulara, programistów backendu dołączających do prac nad interfejsem, full-stack developerów oraz zespołów, które utrzymują lub modernizują aplikacje Vue.
Czas trwania
3 dni
Program
- Vue.js i nowoczesny projekt frontendowy
- Komponenty jednoplikowe (SFC), Composition API i składnia script setup
- Nowy projekt w Vite: struktura katalogów, Vue DevTools
- Rzut okiem na Options API — jak czytać starszy kod
- Szablony i komponenty
- Interpolacja i dyrektywy: v-if, v-show, v-for, v-bind, v-on
- Formularze i v-model, także na własnych komponentach
- Właściwości (props), zdarzenia (emits) i sloty
- Cykl życia komponentu
- Reaktywność w praktyce
- ref, reactive, computed, watch
- Composables — wydzielanie i współdzielenie logiki
- Typowe pułapki reaktywności
- TypeScript w aplikacji Vue
- Typowanie props, emits, ref i composables
- Typy danych z API
- Routing: Vue Router
- Trasy statyczne i dynamiczne, parametry, trasy zagnieżdżone
- Nawigacja programowa i strażnicy tras (np. dostęp po zalogowaniu)
- Leniwe ładowanie widoków
- Stan aplikacji: Pinia
- Kiedy wystarczy stan lokalny, a kiedy potrzebny jest store
- Store: stan, gettery, akcje
- Rzut okiem na Vuex w starszych projektach
- Komunikacja z API
- Pobieranie i wysyłanie danych, stany ładowania i błędów
- Formularze z walidacją
- Testy
- Testy jednostkowe i testy komponentów: Vitest, Vue Test Utils
- Rzut okiem na testy end-to-end
- Praca z asystentem AI w projekcie Vue
- Generowanie komponentów i testów
- Weryfikacja wygenerowanego kodu: przestarzałe wzorce, błędy reaktywności i typów
- Build i wdrożenie
- Build produkcyjny i zmienne środowiskowe
- Rzut okiem na Nuxt — kiedy warto (SSR, SEO)
Na zamówienie przygotowujemy też wersje dopasowane do zespołu: migrację aplikacji z Vue 2 do aktualnej wersji, szkolenie z Nuxt (SSR, SEO, aplikacje full-stack), dłuższą wersję z architekturą większych aplikacji i testami end-to-end albo warsztat na kodzie zamawiającego.
Training also available in English .
Przeznaczenie i wymagania
Szkolenie jest przeznaczone przede wszystkim dla:
- front-end i full-stack developerów, którzy zaczynają pracę z Vue,
- programistów znających React lub Angular, którzy przechodzą do projektu w Vue,
- programistów backendu, którzy coraz częściej pracują też nad interfejsem aplikacji,
- zespołów utrzymujących aplikacje Vue, także te pisane w starszym stylu.
Od uczestników oczekujemy przede wszystkim podstawowej znajomości JavaScriptu (funkcje, tablice i obiekty, praca z danymi asynchronicznymi) oraz HTML i CSS. Znajomość TypeScriptu nie jest konieczna — potrzebne podstawy omawiamy na zajęciach. Doświadczenie z innym frameworkiem (np. React, Angular) ułatwia start, ale nie jest wymagane.
Certyfikaty
Uczestnicy szkolenia otrzymują imienne certyfikaty sygnowane przez ALX.