Vue.js: Jednoplikowe komponenty
Techniki Zaawansowane
5 godz. 11 min · Vue.js · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Zaawansowane techniki pracy z Vue.js
- Praca z wieloplikowymi komponentami
- Zarzadzanie stanem aplikacji z VueX
- Routing z uzyciem vue-router
- Praca z danymi z uzyciem axios
- Techniki walidacji formularzy
- Praktyczne projekty
- Masa przydatnych wskazówek
Kurs, który masz przed sobą, to kontynuacja wydanego wcześniej kursu Vue.js od Podstaw. W pierwszym kursie omówione zostały najważniejsze koncepcje pracy z Vue, a w tym materiale poruszamy już bardziej zaawansowane tematy. Przede wszystkim skupimy się na pracy z użyciem nowoczesnego workflow, co da nam niezwykłą swobodę tworzenia aplikacji internetowych. Jeśli zatem znasz już podstawy pracy z tym frameworkiem i chcesz wskoczyć na kolejny poziom wtajemniczenia, ten kurs jest zdecydowanie dla Ciebie. A co znajdziesz w materiale?
Zaawansowane koncepcje
Na początku zobaczysz, jak szybko tworzyć pliki startowe do nowej aplikacji z użyciem narzędzia vue-cli. Omówimy możliwość dzielenia kodu na wiele plików, tworzenia szablonów, a także wykorzystywania bezpośrednio funkcji renderującej, do której zamieniane są na etapie builda wszystkie szablony.Zobaczysz również czym są i jak pracować z komponentami funkcyjnymi i tzw. mixinami, które pozwolą reużywać raz napisany fragment kodu.
Zarządzanie stanem aplikacji z VueX
Przepływ informacji to bardzo ważny temat w każdej aplikacji internetowej. Vue oferuje kilka sposobów na to, aby komponenty mogły się ze sobą komunikować. Ich omówienie zaczniemy od najprostszych technik, które świetnie sprawdzają się w wielu przypadkach. Następnie rozszerzymy możliwości instancji Vue w ten sposób, aby wszystkie komponenty miały dostęp do scentralizowanego miejsca, gdzie przechowywany będzie stan aplikacji.Tam jednak, gdzie aplikacja wymaga zarządzania większą ilością danych jednocześnie, powyższe techniki mogą być niewystarczające. Z tego powodu, podobnie jak w innych frameworkach, Vue posiada oficjalny wzorzec oraz bibliotekę do zarządzania stanem aplikacji. Rozwiązanie to nazywa się VueX i w kursie zostanie ono dokładnie omówione. Zobaczysz zatem jak skonfigurować tzw. store, jak przechowywać w nim dane, jak je wyświetlać w widokach, aktualizować za pomocą tzw. mutacji czy pracować z nimi wykorzystując akcje. Przekonasz się, że początkowa większa ilość pracy, aby wszystko skonfigurować, w pewnym momencie zaczyna się opłacać.
Routing w aplikacji
Tworzenie nowoczesnych aplikacji typu SPA (Single Page Application) nie może się obejść bez zmian widoków. Dobrą praktyką jest, aby wraz z takimi zmianami, aktualizowany był również pasek adresu. Wykonanie takiego zadania umożliwiają nam tzw. routery. Vue posiada oficjalny dodatek o nazwie vue-router, który w tym kursie dokładnie omówimy.Zobaczysz jak dołączyć router do swojego projektu, a także jak konfigurować ścieżki. Poruszymy tematy takie jak generowanie odnośników, dynamiczne parametry, tworzenie zagnieżdżonych ścieżek czy nawigacja z poziomu kodu JavaScript. Dowiesz się również, jak tworzyć tzw. guardy, które umożliwią lub zablokują możliwość wyświetlania wybranego widoku, np. w zależności od tego czy użytkownik jest aktualnie zalogowany.
Praca z danymi z serwera
Trzecim, po zarządzaniu stanem aplikacji i wykorzystaniu routingu, komponentem, który niezbędny jest do tworzenia aplikacji napędzanych danymi, jest możliwość wysyłania zapytań HTTP.Tę czynność umożliwi nam bardzo popularna, acz niezależna od Vue biblioteka axios. Zobaczysz jak za jej pomocą pobierać i wysyłać dane. Aby jednak jak najwygodniej pracować z tym rozwiązaniem, połączymy axios z Vue, udostępniając tak naprawdę jej metody wewnątrz każdego komponentu.
Walidacja formularzy
W jednym z rozdziałów kursu podejmiemy temat walidacji formularzy. Zobaczysz jak z pomocą popularnego pluginu dla Vue, robić to w bardzo prosty sposób.Omówimy różne funkcje walidujące, które umożliwią sprawdzenie poprawności pól tekstowych, radio czy checkboxów. Zobaczysz jak w łatwy sposób wyświetlać komunikaty o błędach i warunkowo zmieniać wygląd pól. Nie zabraknie również informacji o asynchronicznej walidacji, która pozwoli nam na żywo sprawdzać czy wpisany adres email jest dostępny czy też nie.
Praktyczne projekty
Kurs ten oczywiście to nie tylko niezbędna teoria, ale także praktyczne przykłady. Aby jak najlepiej poznać omawiane techniki, wykorzystamy je do stworzenia ciekawych aplikacji.Pierwszą z nich będzie konfigurator produktu, który umożliwi użytkownikowi wybór podzespołów zamawianego komputera. Każdy taki wybór będzie wpływał na końcową cenę, która będzie na bieżąco aktualizowana. Po wybraniu wszystkich opcji, dane prześlemy na serwer. To projekt który pokaże Ci jak przechowywać dane z użyciem VueX, a także jak na ich podstawie wyświetlić widok i napisać logikę.Innym projektem, który wykonamy, będzie Quiz. To aplikacja, gdzie użytkownik odpowiadał będzie na serię pytań pobranych z serwera, a do wyboru będą 3 odpowiedzi. Po przejściu przez wszystkie pytania, wyślemy do serwera zapytanie, a ten w zamian zwróci nam listę poprawnych odpowiedzi. Dzięki temu pokażemy użytkownikowi, gdzie miał rację, a gdzie popełnił błąd. Aplikacja ta wykorzystywać będzie wszystkie najważniejsze techniki, tj. VueX, routing, a także Ajax.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które czują się już swobodnie w pracy z frameworkiem Vue. Jeśli zatem masz już solidną wiedzę podstawową lub przerobiłeś kurs Vue.js od Podstaw, to zdecydowanie jesteś gotów na poszerzenie swoich umiejętnośći w pracy z tym frameworkiem. Co ważne, doświadczenie w pracy z innymi frameworkami JavaScript nie jest tutaj wymagane, a jedyne co będzie bardzo pomocne, to znajomość nowej składni EcmaScript 6.
Vue.js 2.x.x
Zobaczyłeś już w jaki sposób możemy stworzyć sobie nową aplikację z użyciem Vue init, czyli z tego narzędzia
Vue CLI skorzystaliśmy. Natomiast w tej lekcji chciałem Ci pokrótce pokazać, jak wygląda struktura plików, która
została wygenerowana i że my możemy ją sobie właściwie dowolnie modyfikować w obrębie katalogu src. OK.
Zatem, po pierwsze, jedna z najważniejszych rzeczy. Na początku każdej lekcji, w której będziemy mieli już
gotowy workflow,
będziesz musiał u siebie, w swoich plikach źródłowych wpisać npm install, więc ja to teraz zrobię aczkolwiek
od kolejnej lekcji ja będę to robił zanim rozpocznie nagrywanie,
Więc nie będziesz musiał tego obserwować.
Teraz natomiast chciałem to pokazać, żebyś pamiętał o tym, że bez tego nasza aplikacja nam nie zadziała.
Tak więc zrobiłem sobie npm install i teraz będę chciał tę aplikację uruchomić wpisując npm
run dev. Natomiast mógłbyś się zastanawiać skąd w ogóle bierze się taka komenda, takie zadanie,
dev.
Otóż npm run pozwala nam uruchamiać nazywane zadania i to zadanie nazywa się def, a zdefiniowane jest
ono w pliku package.json,
właśnie tutaj,
w scripts, czyli npm run dev, tak naprawdę uruchamia taką komendę, jak gdybyśmy to wpisali w terminalu.
Z tym, że różnica jest taka że np. webpack-dev-server, gdybym to wpisał w terminalu, musiałby być zainstalowany globalnie,
a tutaj nie musi być bo npm znajdzie go sobie w katalogu node_modules,
dlatego że tutaj gdybyśmy poszukali mamy taką zależność
i to jest zainstalowane.
Oprócz tego, jak widzisz, mamy jeszcze komendę start oraz build i będziemy mogli skorzystać z build'a. To
nam wygeneruje gotowy już build, czyli naszą aplikację taką gotową do produkcji.
Na razie tego nie będziemy robić, ale w zasadzie każdy przykład który zakończymy, możesz spróbować uruchomić
w ten sposób, czyli wpisać npm
run build i pojawi się tutaj katalog dist i w tym katalogu będziesz miał gotową aplikację. Natomiast przez
większą część tego kursu, nie będziemy tego robić, bo nie będzie to konieczne.
Natomiast samo start, jak widzisz to jest
npm run def, czyli mamy tak naprawdę tylko dwa zadania.
Jeśli wpiszemy npm start, to będzie to to samo, co wpisanie npm run dev, dlatego od tej pory będę wpisywał
npm start, po prostu. OK.
No i ta aplikacja nam się skomplikuje i uruchomi. Będziemy mogli sobie ją otworzyć w przeglądarce, więc kopiuje
ten adres oczywiście i otwieram przeglądarkę. Możemy ją uruchomić.
I teraz, co będę chciał Ci pokazać. Otóż rzeczy, które nas interesują, na których będziemy pracować, to jest
po pierwsze katalog src, ale po drugie również plik index.html i ja ten plik już w całości podmieniłem.
Zauważ, że tutaj podlinkowałem sobie
style.
Jest to taki framework spectre.css, z którego będziemy korzystać w tym kursie.
Natomiast, na razie, będziemy sobie to linkować w tym miejscu, czyli Vue nie będzie tak naprawdę zajmowało się naszymi
stylami. Przynajmniej nie tymi głównymi.
Natomiast przy praktycznych przykładach, później w kursie pokażę ci, w jaki sposób możemy zaimportować wewnątrz Vue
również arkusze styli.
Na razie jednak tak to zostawimy i to co jest ważne, to tutaj musimy mieć gdzieś taki element z identyfikatorem
app, bo do niego będzie wystrzeliwane aplikacja.
Ten identyfikator można zmienić, ale później będziemy również musieli to zmienić tutaj w pliku main.js.
I co jeszcze jest ważne.
Webpack tutaj automatycznie wstrzyknie nam wszystkie skrypty, więc żadnych skryptów tutaj nie będziemy podpisać.
Jak zatem widzisz, możesz dowolny plik index.html sobie przygotować dla Twojej aplikacji, a część kontrolowana
przez Vue będzie tam gdzie wstawisz element z identyfikatorem app.
Ok.
Teraz przejdziemy do kolejnej rzeczy, czyli do katalogu src, bo tych powyższych katalogów tutaj nie
będziemy w żaden sposób modyfikować, przynajmniej na razie.
Dlatego przejdźmy tutaj, zobaczmy co dla nas Webpack przygotował, czy w zasadzie narzędzie Vue CLI, które jest
również z Webpack'iem skonfigurowane.
Mamy główny plik main.js i on jest o tyle ważny, że jest to główny punkt startowy, od którego webpack zacznie
tworzenie drzewa zależności.
Tutaj za pomocą zapisu ECMAScript6,
mam nadzieję, że te zapisy znasz, importujemy sobie Vue, w taki sposób i jeżeli nie podejmiemy żadnej
kropki, slash'a i tak dalej, to oznacza, że importujemy coś, tak naprawdę, z node_modules,
czyli jakiś moduł zainstalowany z użyciem npm, no i tutaj jeszcze importujemy aplikację.
Tym razem już z tego samego katalogu, w którym jest main i mamy tę aplikację i zazwyczaj tak będziemy
pracować, aczkolwiek ta struktura jest dowolna, jeżeli mamy ten plik main.js to samą aplikację możesz
nazwać inaczej. Możesz ją wstawić też w innym miejscu,
ale ważne jest to, że w momencie kiedy tworzymy główną instancje, czyli new Vue, podajemy element app, to oznacza
że tutaj, w tym pliku w tym miejscu będzie ona zamontowana. To musimy również podać funkcję renderującą, która
wygląda w ten sposób i przyjrzymy się jej dokładniej w kolejnej lekcji i tej funkcji przekazujemy główną
aplikację.
Więc tutaj, na razie, nic więcej nie będziemy robić.
Przejdźmy do głównej aplikacji.
No i jak widzisz, jest tutaj sporo rzeczy, które dla nas Vue init wygenerowało.
Ale najważniejsze jest to, że będziemy mieli blok template. Ja sobie pozostałe rzeczy usunę. Blok scripts,
którym będziemy sobie mogli pewne rzeczy wykonywać, jeżeli chodzi o kod JavaScript i tworzyć nasz główny
komponent. On jest tutaj zdefiniowany i również style, które będą wyłapywane i później wstrzykiwane na
stronie. Ja te style usunę, na razie nie będą one potrzebne.
I tutaj w tym template, będę chciał, po pierwsze ustawić sobie intentację na cztery scpacje.
I będę chciał tutaj sobie wstawić div z identyfikatorem app, natomiast on nie ma tak naprawdę nic wspólnego
z samym identyfikatory app, który jest tutaj.
Możesz to dowolnie stworzyć, natomiast w takim template musi być wyłącznie jeden element, root element, czyli tu nie może
być kilku elementów obok siebie. Musi to być oplecione jakimś jednym głównym elementem.
I teraz za importowany komponent Hello World będę chciał wstawić i nie musimy go domykać w ten sposób.
jeżeli nie będziemy nic do wewnątrz, do wewnątrz wstrzykiwać. Możemy go od razu domknąć, dzięki temu że ta templatka
jest prekomplikowana i zamieniona na funkcję regulującą, to tak naprawdę, ona nigdy nie trafia bezpośrednio
do przeglądarki w takiej formie i nie będzie z tym żadnego problemu.
Jak widzisz, komponent jest za importowany z tego katalogu, HelloWorld.
Nie musimy podawać rozszerzeń, bo tak to zostało skonfigurowane, że kropka Vue kropka js i kropka json
są automatycznie tutaj importowane, bez podawania rozszerzenia.
Ja sobie tylko zamienię tutaj cudzysłowy.
Wolę pracować z takimi i z formatuje sobie to po swojemu, OK.
Jak widzisz, w tym miejscu, z tego pliku app eksportujemy komponent.
Cały ten zapis, to jest zapis komponentów, więc tutaj będziemy wpisywać wszystko to, co możemy wpisywać
również tutaj, przy nowej instancji Vue,
z tym, że bardzo ważne jest to,
mam nadzieję, że wiesz, że jeżeli będziemy podawać data, tak jak jest to np. w tym miejscu, to musi to być
funkcja, która zwraca obiekt, ale do tego przejdziemy za sekundę.
Sama nazwa, którą tutaj podajemy jest potrzebna po to, żeby w narzędziu do dywagowania, czyli Vue Dev Tools, które
mam nadzieję masz zainstalowane, żeby w nim można było podejrzeć nazwę takiego komponentu.
I tutaj podajemy listę komponentów, które w tej templatce będą działać.
Gdybym chciał nazwać ten komponent tutaj inaczej, to mógłbym go nazwać inaczej np. hello równa się Hello
World I wtedy tutaj odwołałbym się do niego poprzez Hello.
Natomiast, jeżeli wiemy, że tak samo go będziemy nazywać, to możemy skorzystać ze skrótowego zapisu
ECMAScript6, czyli Hello World, jeśli tylko podamy to jest to równoważne zapisowi Hello world,
dwukropek Hello world.
Mam nadzieję, że takie rzeczy znasz.
W dalszej części kursu nie będziemy się już skupiać na tych rzeczach związanych z
ECMAScript6.
Ok, w takim razie, stąd jest eksportowany ten komponent.
Więc kiedy tutaj robimy import App, to ten komponent jest zaimportowany i to on jest renderowany tutaj
do tej głównej aplikacji.
Natomiast zerknijmy sobie, co mamy w samym Hello World.
Ja będę chciał tutaj w zasadzie wszystko usunąć i stworzyć sobie od nowa template, też ustawię
sobie tutaj intencje na cztery spacje i od nowa stworzę sobie script, ok i teraz samym script, będę chciał wyeksportować,
export default, od zawsze tak będziemy to robić.
Nasz komponent Hello world, więc możemy mu nadać nazwę.
Ona nie jest obowiązkowa, ale lepiej ją przypisać.
I teraz funkcja o nazwie data, która zwraca obiekt, i w tym obiekcie będziemy mieli te rzeczy, które będą
temu komponentowi potrzebne, czyli jego stan.
Więc ja chciałbym mieć tutaj coś takiego jak heading'i to będzie HelloWorld I oprócz tego zrobimy sobie
jeszcze message
I będzie to Witaj Świecie.
Ok i tyle nam tutaj wystarczy.
A jeżeli chodzi o templatkę, to stworzymy sobie diva, pamiętaj tylko jeden root element może tutaj być dlatego muszę
to opleść div'em i będę chciał wyświetlić heading i będę chciał również wyświetlić paragraf z message.
I teraz myślę, że jest to o wiele czystszy zapis i widzisz, co tutaj się dzieje.
Mamy jeden taki komponent HelloWorld, importuje go sobie tutaj i następnie mówimy temu komponenty AP
że on może korzystać z HelloWorld, a więc w którym miejscu w jego templatce wstawimy HelloWorld.
W tym zostanie tak naprawdę wyrenderowana taka templatka z tymi odpowiednimi danymi.
Teraz jeśli byśmy przeszli do przeglądarki to automatycznie jest odświeżone i wszystko działa jak należy.
Natomiast gdybyśmy przeszli tutaj do narzędzia Vue, to będziemy mieli nazwę App, przez to że name App podaliśmy.
Również HelloWorld i oczywiście te rzeczy mogę zmieniać, tutaj w tym narzędziu, jeśli wstawię trzy wykrzykniki,
na stronie jest również odzwierciedlane.
Więc tak mniej więcej to wygląda. Tutaj oczywiście jeszcze można korzystać ze styli i polecam podawać
im atrybut scoped, wtedy one będą przypisane. Zaraz zobaczysz w jaki sposób.
Jeżeli zrobię h1 i przypisze mu margin-bottom bo np. 50 pikseli i zapisze to wszystko. Odświeżymy, to jak widzisz
ta h1 otrzymała atrybut data, przez to że podałem scoped i h1, razem z takim atrybutem data, tworzy
taki oto styl.
Dzięki temu do innych h1 na stronie, te style się nie będą odwoływać.
Więc tyle dla danego komponentu można tworzyć tutaj i one, kiedy korzystamy z tego Webpack Dev Server, teraz, są
wstrzykiwane w taki oto sposób,
tutaj. Natomiast później, jeżeli wykonałbyś build'a to one będą ekstra chowane i wystawione do osobnego
pliku, który zostałby w tym miejscu po prostu podlinkowany, z wszystkich komponentów wszystkie style zostałyby
wyciągnięte i do tego plików wstawione.
Jak zatem widzisz, mamy dużą dowolność w tworzeniu tej struktury, bo nie musisz wcale mieć katalogu components,
ale jest to dobra praktyka i wtedy importujemy sobie komponenty w ten sposób. Zatem my będziemy w katalogach,
czy w katalogu components stworzyć różne komponenty i następnie będziemy je importować i w głównej aplikacji
również wstawiać. Także
mam nadzieję, że ta struktura nie jest jakoś odstraszająca, a że widzisz jej niebywałe zalety w tworzeniu
takich aplikacji.
Natomiast jest jedna ciekawa rzecz, mianowicie ta funkcja renderująca i to jest coś, na co chciałbym zwrócić
uwagę w kolejnej lekcji, a więc do usłyszenia za chwilę.