Nuxt.js: Przenoszenie statycznej strony do nuxta
Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Praktyczny kurs, praktyczny projekt: klon Wikipedii
- Migracja statycznej strony HTML do ekosystemu Nuxt
- Tworzenie klasycznych komponentów VueJS
- Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
- Tworzenie i wykorzystanie modułów i pluginów do Nuxt
- SSR - Server Side Rendering
- Programowanie z duchem idei progressive enhancement
- Animacje podczas przejść między podstronami
- Wsparcie dla różnych wersji językowych
- Niebanalne funkcjonalności aplikacji
- Optymalizacja dla wyszukiwarek internetowych
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
Cześć! W tej lekcji zajmiemy się przenoszeniem
naszej istniejącej aplikacji do Nexta, czyli tutaj.
Jak zobaczycie mam taki katalog chrome i otwierając go zobaczymy wszystkie te
pliki, które pokazywałem na samym początku lekcji.
Czyli są tutaj po prostu style.
Takie globalne.
No i całe nasze BD Czyli to co możemy
zrobić to tak naprawdę przekopiować sobie te style.
I jak do tego podejść?
My będziemy pracowali w tym momencie na stronie głównej w katalogu pages.
Wykorzystamy do tego indeks View, czyli
zastąpimy całą tę treść naszym kodem i tak samo nasze style zapiszemy.
Oczywiście to nam zniknie.
Tutaj widzimy, że DAX się przebudowuje.
Widać 11% to może działać wolniej lub szybciej w zależności od różnych rzeczy.
Tempo first kind element.
Oczywiście to jest prawda, tak jak w View.
Musimy mieć przynajmniej jeden
element wewnątrz template A, czyli tutaj zapisujemy co się buduje.
I w tym momencie oczywiście będzie to pusta strona.
Może pozbądźmy się tego klienta z naszej konfiguracji?
Wydaje mi się, że już to zrobiłem.
Jeszcze się upewnijmy.
Mac x oczu zapiszemy.
PS Mint nie ma już tutaj nic.
Jeszcze raz piszemy i zobaczmy czy jeszcze nie ma tutaj
jakiegoś pliku C i możemy się go po prostu w tym momencie pozbyć.
Oczywiście to jest dosyć przydatna
funkcjonalność narzędzie, ale ze względu na to, że mi nie zależy na tym, aby
tworzyć nasze style równo tzn aby intencja była zawsze taka sama.
Bardziej zależy mi na przedstawieniu struktury całości aplikacji.
No to ja sobie to komentuje i idąc dalej powinniśmy przerzucić cały nasz kontent.
Więc robimy to analogicznie, czyli index.
HTML.
Kopiujemy całą treść Buddy na ten moment.
Wchodzimy do sklepu i wrzucamy to tutaj oczywiście.
Nie możemy tutaj użyć budek, ponieważ.
Nasza aplikacja może zamontować się w
różnych miejscach, więc tutaj z samego końca pozbędziemy się
tego wady i po zapisaniu ta aplikacja powinna się już wyświetlić.
Oczywiście bez assetów.
Tutaj np.
logo MI nie jest obecne.
Ten obrazek jest obecny ponieważ jest a system absolutny, czyli jak tutaj podajemy
narzędziach deweloperskich na narzędziach deweloperskich.
To jest tutaj po prostu to bezpośrednie.
Link do Wikipedii.
Więc aby umieścić tutaj mini pdf no to oczywiście musimy sobie nasz plik log 2.
PNG przenieść do katalogu static.
Tak jak wspominaliśmy wtedy będą to assets
dostępne globalnie pod ścieżką roota, czyli pod głównym katalogiem
naszej strony dokładnie tutaj, czyli jeśli przeniesiemy loga.
2. PNG w tym miejscu
w tym momencie nic się tu nie pojawia, jest jakiś jeden piksel, co jest w sumie
dosyć ciekawe, ale jeśli przeniesiemy tutaj logo 2 do statyka,
klikniemy mów i odświeżamy to faktycznie widzimy nasze logo.
I po odświeżeniu faktycznie ona się tutaj znajduje, więc wszystko ok.
Mamy tutaj postać Janusza Korczaka.
Bardzo, bardzo interesująca persona i aktywista.
Polecam zapoznać się z tą osobą.
Będziemy na tym przykładzie pracować do
końca lekcji, aż do momentu, kiedy stworzymy.
Dynamiczny widok różnych wpisów z Wikipedii, ale jeśli przejdziemy np.
do Flickr login.
To zobaczymy, że ta strona dalej podąża za tym domyślnym szablonem, który
stworzyliśmy wcześniej, więc do tego wykorzystamy layouty.
I to co możemy zrobić to oczywiście
przenieść sobie tą część HTML a, która jest odpowiedzialna za.
Cały rapier, czyli całą główną.
Część kontenera całej naszej strony, całą nawigację oraz nasz header czyli baner.
Header to jest ta tutaj, gdzie mamy
wyszukiwarkę oraz link login, które swoją drogą możemy podpiąć pod naszą stronę.
Jak to wytniemy stąd zapiszemy.
No to oczywiście te style będą troszkę gorzej wyglądały.
One się całkowicie nie rozjechały,
ponieważ starałem się używać klas atomowych, co znaczenie mają
w zależności od tego w jakim miejscu się znajdują.
I dalej atak.
W tym momencie możemy zmienić nasz default layout.
I tutaj tak jak wspominałem Max odpowiada za całą treść patcha renderowane.
Jeżeli komentujemy tutaj, komentujemy tak jak się komentuje
HTMLa zapiszemy, to cała treść nam zniknie.
Ale jeśli to zostawimy i dodamy tutaj nasz wrapper.
I w tym momencie zostawiam nexta.
Jakieś może Spotify też by się tutaj przydał.
Zapiszemy?
To w tym momencie widzimy, że nasza strona wygląda dokładnie tak samo.
I jeśli przejdziemy do pliku login, to ona faktycznie wygenerowała cały HTML.
Jeżeli sprawdzimy źródła, no to
tutaj znajduje się ten sidebar, ale style są dalej umieszczone w tagu.
Dlatego nie wygląda ona dokładnie tak samo
i to co możemy zrobić I chyba tego się będziemy trzymali do końca tego przykładu
to po prostu przenieść wszystkie style, które są globalne do naszego layoutu.
Raczej nie będzie tutaj specyficznych styli zależnych.
Od danego widoku.
Przechodzimy do layoutów i tutaj
w sekcji Style po prostu na wpisujemy to co jest zdefiniowane i zapisujemy.
I w tym momencie widzimy, że banner oraz sidebar już się wyświetlają.
Nie wyświetla się dobrze tylko i wyłącznie nasza sekcja.
Z treścią. A dzieje się tak dlatego, ponieważ
jeśli zerkniemy w nasze style, to cała treść naszego artykułu musi mieć
klasę content i tej klasy w tym momencie page play z logiem nie posiada.
Czyli tutaj powinniśmy pozbyć się tego.
Albo po prostu treści.
Widocznej tutaj i zmieniamy ją na kontent, bo to jest nasza klasa, z której używamy.
I w tym momencie widzimy nasze logo i
możemy ponownie dać tutaj wiadomość plus flagę.
Niech będzie to, a dwójka być może jest tutaj bardziej adekwatnym znacznikiem.
I w tym momencie widzimy, że zarówno na stronie głównej.
Jak i na stronie 2 gim mamy dokładnie ten sam układ strony.
Tutaj coś nam się nie wędrowało.
Jest to w sumie ciekawe dlaczego.
Podejrzewam, że jeszcze brakuje nam.
Czegoś z indeksu.
Page article class content.
Ciekawe czy to jest postulowane po tagu.
Zobaczmy.
Czyli wracamy do Play Login.
Raczej takich zmian typowo CSS owych też nie będzie za dużo w tym kursie.
Tak wymagany jest znacznik article, co jest raczej słabym
rozwiązaniem jeżeli chodzi o tworzenie naszych styli, więc może zerknąć
tylko szybciutko na nasze layouty i zobaczę gdzie tu jest kartka.
Widoczne.
Ciekawe nie jest, nie wygląda jak postulowane po.
W znaczniku article.
Chyba, że te testy idą z innego miejsca.
W każdym razie działa.
No i tak jak widzimy nasza strona wygląda już ok.
Jest to dalej czysta statyczna strona HTML, tylko że przeniesione do Nexta.
Czyli to, co będziemy robili na następnych lekcjach, następnych działach.
To tworzenie indywidualnych komponentów
dla każdego z miejsc, które będą w pewien sposób
nieużywane oraz uzupełnianie tych funkcjonalności
tych wszystkich linków w tranzycie między podstronami.
Tego typu rzeczy będziemy robili teraz jako kończący aspekt tej lekcji.
Możemy podmienić jeszcze tutaj ikonkę i jak już wiemy możemy to zrobić w katalogu.
Next config. Czy jest.
I w tym miejscu mamy definicję naszej ikonki.
Jeżeli zmienimy ją na PNG zapiszemy to ona w tym momencie nam zniknie.
To przebudowanie się styli i możemy przenieść albo skopiować obecne logo.
Teraz zmienimy mu nazwę na KPMG.
I widzimy, że faktycznie zmieniła się treść naszej strony.
Możemy też oczywiście zmienić jej tytuł na.
Mini poezja.
Z wielkiej litery i oczywiście to też
zostanie zaaplikowane, więc takie początkowe przeniesienie
szablonu layoutu mogłoby wyglądać w ten sposób.
Oczywiście trzeba byłoby to rozbijać na
pojedyncze komponenty, co też będziemy robić, ale to jest pierwszy krok, który
pozwoli Wam uruchamiając Waszą aplikację miejscową widzieć
stronę, którą przygotowaliście wcześniej z Waszą ikonką, z Waszymi kasetami itd.
Więc podsumowując wykorzystaliśmy katalog static, aby przechowywać statyczne sety.
Moglibyśmy do tego oczywiście wykorzystać też katalog assets.
W tagach wstawiliśmy odpowiednie treści HTML i w layoucie wrzuciliśmy wszystkie
nasze style, ponieważ są one stylami globalnymi dla tego konkretnego layoutu
oraz rzeczy generyczne takie jak header czy sidebar, które też mogłyby być
komponentami, ale prawdopodobnie skupimy się tylko na tej sekcji artykułu.
Do zobaczenia w następnej lekcji!