Kurs Vue 3 dla początkujących: aplikacja krok po kroku

Vue.js to progresywny framework JavaScriptu: można go dołożyć do istniejącej strony jednym znacznikiem script albo zbudować pełną aplikację z narzędziem do budowania. Ten kurs idzie drugą drogą, tą, którą podąża oficjalna dokumentacja i niemal wszystkie dzisiejsze projekty.

W jedenastu rozdziałach zbudujesz mały sklep: kartę produktu z wariantami kolorystycznymi, koszyk, formularz opinii i animacje, które to spinają. Każde pojęcie pojawia się w chwili, w której aplikacja go potrzebuje, nigdy wcześniej.

Co zbudujesz

Jedna aplikacja, rozbudowywana rozdział po rozdziale. Na końcu wyświetla produkt i jego zdjęcie, reaguje na najechanie na kolory, wyłącza przycisk, gdy wariantu brakuje w magazynie, napełnia koszyk, przyjmuje zwalidowane opinie i animuje ich pojawianie się.

Kod jest dzielony na komponenty od rozdziału 8, tak jak w prawdziwym projekcie.

Ścieżka w jedenastu rozdziałach

1. Tworzenie aplikacji Vue, projekt, createApp, pierwsza dana reaktywna.
2. Wiązanie atrybutów, wyświetlenie zdjęcia produktu przez v-bind.
3. Renderowanie warunkowe, informacja o dostępności produktu, z v-if i v-show.
4. Renderowanie list, skład tkaniny i warianty produktu, z v-for.
5. Obsługa zdarzeń, przycisk, który napełnia koszyk.
6. Wiązanie klas i stylów, kropki z kolorami i wyłączony przycisk.
7. Właściwości obliczane, wyliczenie zdjęcia i dostępności z wybranego wariantu.
8. Komponenty i props, podział aplikacji i przekazywanie danych.
9. Komunikacja zdarzeń, przekazanie kliknięcia w górę, do rodzica.
10. Formularze i v-model, formularz opinii wraz z walidacją.
11. Przejścia, animowanie pojawiania się i znikania.

Kompletny kod pobierzesz u góry strony: projekt Vite z katalogiem na każdy rozdział i zestawem testów, który sprawdza każdy z nich.

Composition API: styl tego kursu

Vue daje dwa sposoby pisania komponentu. Options API układa kod w opcje: data, methods, computed. Composition API zapisuje go jako zwykłe zmienne i funkcje w bloku <script setup>.

Ten kurs korzysta z Composition API, bo to styl, który oficjalna dokumentacja poleca w nowym projekcie, i ten, który spotkasz w większości kodu pisanego od czasów Vue 3. Oba style są nadal wspierane: Options API nie jest przestarzałe i długo jeszcze będziesz na nie trafiać w istniejących projektach.

Oto tabela odpowiedników, warto trzymać ją pod ręką.

// Composition API, w <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // tylko w skrypcie,
                                             // nigdy w szablonie

Każdy rozdział, którego to dotyczy, przypomina odpowiednik omawianego pojęcia w Options API.

Czego potrzebujesz

• Podstawy HTML, CSS i JavaScriptu. Jeśli funkcje strzałkowe i destrukturyzacja nic Ci nie mówią, powtórz je przed rozpoczęciem.
• Node.js 22.18 lub nowszy (albo 24.12 i nowsze). Sprawdź poleceniem node -v: oficjalny generator projektów odrzuca starsze wersje. Zaktualizuj też npm poleceniem npm install -g npm@latest: npm 10 dostarczany z Node 22 zawodzi przy npm install nowego projektu Vue.
• Edytor kodu. Visual Studio Code z oficjalnym rozszerzeniem „Vue – Official” daje autouzupełnianie w plikach .vue. WebStorm i Zed też się nadają.

Znajomość Vue 2 nie jest potrzebna. Jeśli stamtąd przychodzisz, zapamiętaj, że Vue.use, Vue.mixin i Vue.prototype już nie istnieją: wszystko idzie teraz przez instancję aplikacji zwracaną przez createApp.

Jak pracować z tym kursem

Przepisuj kod, zamiast go kopiować. Po każdym rozdziale zepsuj coś celowo i przeczytaj komunikat błędu: to najlepszy sposób, żeby nauczyć się je odczytywać.

Każdy rozdział kończy się ćwiczeniem, które dotyczy omawianego pojęcia i da się je rozwiązać tym, co masz już napisane.

Po tym kursie

Żeby podpiąć aplikację pod prawdziwe dane, zobacz jak dodać Firebase do aplikacji Vue.

Po jedenastu rozdziałach naturalnym ciągiem dalszym jest współdzielenie stanu między komponentami z Pinią, a potem routing z Vue Router. Od strony architektury zobacz jak pisać własne wtyczki Vue oraz jak zająć się pozycjonowaniem aplikacji Vue.