Nuxt.js: Struktura aplikacji
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.
W poprzedniej lekcji udało nam się stworzyć nasz pierwszy projekt tekstowy.
I w tej lekcji.
Opowiem troszkę o strukturze katalogów.
Lecz zanim do tego dojdziemy chciałbym tutaj zauważyć, że tak jak uruchamiamy.
Polecenie npm runde aby uruchomić nasz serwer dla.
To nie musimy tego wpisywać ręcznie.
I tutaj jeżeli zobaczycie w kodzie jest taka sekcja npm scripts.
Jeśli jej nie.
Widzicie możecie kliknąć prawym przyciskiem myszy.
Na nią i tutaj będą.
Różne komponenty, które możecie włączyć w kodzie.
Czyli jeśli np. nie widzicie jej na to, możecie.
Sobie zaznaczyć npm. Scripts.
I jest to o tyle wygodne, że to po prostu pasuje nam.
Nasz plik PC. Jackson i znajduje wszystkie.
Skrypty, które możemy uruchomić w naszym projekcie.
Czy jeśli tutaj kliknę sobie.
Na ten guziczek run?
No to zobaczymy, że faktycznie.
Nasza aplikacja się buduje i jak przejdziemy tutaj.
Do naszej aplikacji to widzimy nawet taki loader.
Akurat ta aplikacja jest bardzo.
Leciutka, więc jeszcze go nie było widać.
Ale fajne jest też też.
Ale fajne jest też to, że właśnie podczas budowania assetów.
Mamy tutaj taki ekran powitalny, przynajmniej w trybie developerskim.
Więc jeśli chodzi o strukturę katalogów.
To.
Generalnie naked polega na tym, że dużo tutaj konfigurujemy.
Oczywiście programować też będziemy, ale
nie musimy znać wszystkich zasad czy reguł jak tworzyć routing.
Ponieważ Next robi to za nas dzięki swoich opcjom konfiguracyjnym.
Czyli jeśli wejdziemy tutaj do pliku na skonfiguruje.
To jest to taki główny plik jeżeli chodzi o nexta i jego najważniejsze konfigurację.
Oczywiście możemy go sobie rozbić na mniejsze pliki jeśli nam na tym zależy.
I chciałem pokazać tę opcję. Będziemy tutaj oczywiście.
Omawiać w osobnej. Lekcji.
Ale to co chciałem pokazać to.
Rozwiązałem ten problem.
Z warunkami, które się pojawiały tutaj na dole terminala podczas budowania.
Projektu i okazało się, że po prostu w niektórych wersjach paczek.
Ja tutaj akurat mam takiego pecha.
Nie są ze sobą kompatybilne i trzeba.
Dać dodatkową konfigurację, poza tym co domyślnie generuje.
W związku z czym jeżeli macie problem z tymi warunkami.
Które mówią Wam o labelu, który ma jakiś luz miesiąc.
To wtedy taka. Sekcja Wam pomoże.
I ja po prostu.
Poszukałem tego w wyszukiwarce internetowej na StackOverflow.
Ktoś już znalazł rozwiązanie.
W związku z czym tym się nie przejmujcie, tak długo jak wam.
Działa aplikacja to to jest ok.
Ale po prostu dla czystości.
Ja to sobie tutaj wyłączyłem.
I takie właśnie rzeczy typu budowanie nexta możemy.
Zrobić w pliku next. Configure jest.
O którym też będziemy mówili później o wiele więcej.
Przejdźmy więc do katalogów.
Tutaj stworzył nam dużo katalogów, które są w większości puste i z katalogu assets.
Jesteśmy w stanie umieścić.
Nasze obrazki, nasze fonty, nasze statyczne style CSS, które chcemy
ładować dynamicznie bądź dynamicznie na naszych widokach.
I w każdym z takich katalogów jest plik cmd, który jeśli klikniemy.
Sobie jest kontrolerem przez komendę.
Otworzy nam się tutaj taki.
Pop up i przekieruje nas to bezpośrednio do.
Dokumentacji tego.
Konkretnego katalogu.
Dokumentacja jest oczywiście w języku angielskim.
Ale ja tak czy siak polecam zerkać na nią.
Ponieważ możecie skopiować sobie z niej kodu.
Nie musicie rozumieć wszystkiego, każdego
słowa po angielsku, aby pracować z różnymi markami.
Jak widzimy możemy tutaj.
Zadeklarować.
Obrazki.
Statyczne, pliki. CSS, fonty, różne rzeczy.
Pakiet można po.
Konfigurować, więc katalog assets jest od tych.
Mniej.
Strukturalnych rzeczy, jak właśnie obrazki czy rzeczy wizualne.
Nie będziemy chyba za bardzo korzystali z tego.
Katalogu w naszym kursie. Ponieważ nie jest tutaj jeszcze.
Taki siostrzany katalog static.
Do którego możemy wrzucać zupełnie statyczne rzeczy, które chcemy, aby były.
Osiągalne z poziomu przeglądarki.
Czyli jeśli tutaj wejdziemy w.
Widzimy, że jest tutaj rytm i kropka end.
Więc wchodząc na nasz projekt mini
i wpisując Redmi kropka Enter powinno nam się pojawić właśnie jego zawartość, czyli
wszystko to, co domyślnie dzieje się w tekście.
To co wrzucimy w katalog static będzie.
Dostępne pod router projektu, czyli pod pierwszym sklepem.
Czy jeśli wpiszemy sobie tutaj fabryką.
Kropka.
Ikona to faktycznie.
Wyświetli nam się nasza ikonka. I do tego służy.
Katalog static? Myślę, że bardziej będziemy.
Korzystać ze statków w.
Tym momencie.
Później, gdy połączymy się z naszym.
API i tak nie będziemy tego robić w ten sposób.
Natomiast to są dwa katalogi, które służą serwowaniu po prostu statycznych danych.
Następnym katalogiem jest katalog components.
Jak widzimy jest tutaj pierwszy plik.
Logo kropka view.
Jest to zwykły plik. View.
Nie ma tutaj żadnych specyficznych rzeczy dla Nexta, nawet może jest klasa max logo,
ale wydaje mi się, że ona jest właśnie tutaj po prostu w template użyta.
W związku z czym jest to. Zwykły komponent View.
To co wyróżnia katalog.
Components.
Jest to, że wrzucając tutaj dowolny komponent będziemy mieli do.
Niego dostęp globalnie, bez konieczności jego importowania.
To znaczy jeśli przejdziemy do katalogu pages, w którym tworzymy wszystkie nasze
widoki, zobaczymy, że jest tutaj plik indeks kropka view.
Jest to właśnie ta strona główna, którą.
Widzimy po przejściu na localhost 3000, co też oczywiście możemy
skonfigurować w skonfiguruje się, jeżeli chcemy mieć ją na innym porcie.
I wewnątrz tego komponentu.
Tutaj widzimy, że to jest właśnie.
To logo, które jest zdefiniowane w pliku
components, czyli tutaj przez króluje sobie.
W górę i widzimy.
Logo.
I to logo właśnie jest tym. Logo z Components.
Ono nie jest tutaj nigdzie importowane.
I Next wie, że może ładować.
Te pliki stąd, ponieważ właśnie w katalogu
NAS configure jest jest tutaj zaznaczone components thru.
I możemy sobie.
Oczywiście w dokumentacji poczytać jak to można skonfigurować.
I analogicznie jeżeli chcielibyśmy w katalogu pages stworzyć nową podstronę.
Np. login kropka view.
No to możemy sobie tutaj to przekopiować.
Już widzimy, że nam się tutaj przebudowuje.
Zapiszemy.
I tutaj wpiszemy Morgen.
Szybko się budowało. I teraz.
Przechodząc do.
Log in.
Będziemy mieli nasz nowy.
Komponent, nasz nowy widok.
Czyli tak naprawdę jesteśmy w stanie.
Nawigować się teraz w pełni po naszej aplikacji za pomocą klasycznych.
Metod w przeglądarkach tak.
Jakby była to osobna podstrona, a my tylko stworzyliśmy nowy plik w katalogu pages.
Katalog pages będzie tutaj bardzo potrzebny.
Co jednak, jeśli chcielibyśmy, aby te dwie.
Sekcje miały jakieś punkty wspólne?
Co do tego w obecnej.
Wersji służą.
Layouty.
I tutaj widzimy, że jest to tak naprawdę kolejny komponent
View, który ma jakieś style globalne i magiczne.
Predefiniowane komponent Next.
W tym komponencie generowany jest nasz
page, czyli wszystko co zdefiniujemy sobie w Pages będzie lądowało.
Tutaj w komponencie Next.
I komponent będzie wybierany na podstawie naszego auta.
Czyli jeśli tutaj zmienimy.
Sobie nazwę ścieżki na.
Plis mogę.
No to faktycznie zobaczymy, że.
Wpisując teraz login nic nie zobaczymy wypadku.
Fantastyczna czwórka.
Ale jeśli dodamy klasę no to faktycznie.
Widzimy, że to już nam działa.
Czyli nazwa pliku jest istotna w.
Pages jak i w layoutów jeśli chodzi o konfiguracja i podobnie jest w tekście.
Jest to bardzo analogiczna sytuacja do
tego co się dzieje w innych formatach tego typu.
Kolejnym katalogiem. Którego nie omówiliśmy są middleware.
Middleware. Będziemy też poruszać.
Oczywiście głębiej w lekcji dotyczącej routingu.
Generalnie teraz jesteśmy w stanie stworzyć.
Logikę, czyli faktycznie kod skryptowy.
Który będzie wykonywany.
Zanim przejdziemy na daną podstronę.
Czyli jeśli chcielibyśmy, aby była pewna funkcjonalność, która będzie
się działo za każdym razem, gdy wchodzimy na daną podstronę np.
jakaś analityka.
Czy może zasysanie danych z API, to drugie właśnie będziemy robić w tym.
Kursie, to wchodząc na dowolną stronę.
Jeżeli za deklarujemy middleware to ten kod będzie mógł się wykonywać bez
konieczności tutaj brudzenia naszych komponentów.
Idąc dalej pluginy jesteśmy w stanie tak jak.
Rozszerzamy view możemy rozszerzać także. Na hosta.
Czyli jeśli chcielibyśmy jakiś.
Plugin do view powiedzmy drag and drop
albo portale to możemy tutaj je zadeklarować i będą one.
Ładowane. Oczywiście jest link do dokumentacji.
Katalog static już omówiliśmy. No i to, że.
Jesteśmy w stanie deklarować storage tekstowego jest domyślnym torem dla.
Nexta.
I jest to implementacja pattern flags.
Czyli tak naprawdę. Ekwiwalent Redux dla Jaxa.
Czyli tak naprawdę ekwiwalent.
Redakcji dla Akta.
I pozostałe rzeczy, których jeszcze nie omówiliśmy.
To ukryty katalog ukryty, ponieważ.
Zawiera tutaj, jak się przyjrzymy.
Taką teczkę, w którym znajdują się pliki, które.
Na sobie. Zbudował.
Czyli raczej tam nie zaglądamy.
Bardziej istotne jest w tym katalogu to, że jeżeli coś nam nie działa na stronie.
A wszystko wydaje się dobrze z punktu widzenia aplikacji.
To czasem wypada.
Usunąć ten katalog, żeby po prostu pozbyć się kesza.
I analogicznie dist.
Są to pliki wynikowe, które są budowane
również przez Nexta i analogicznie możemy je usunąć, jeżeli coś.
Jest nie skasowane. A poza tym raczej nie.
Musimy tam. Zaglądać, chyba że chcemy.
Zobaczyć po prostu jak działa pod. Spodem i.
Jakie bundle nam tworzy.
Pozostałe pliki, które zostały.
Wygenerowane to pliki konfiguracyjne typu.
Editor, config, s, light, kit, ignore i takie.
Klasyczne pliki, które znajdziecie w każdym projekcie.
Dowolnej strony HTML.
Więc to wszystko w tej lekcji.
Oczywiście każdy z tych katalogów.
Będziemy rozwijali w osobnym czasie, tworząc praktyczne.
Przykłady. Jeżeli chodzi o troszkę teorii.
To tak właśnie wygląda struktura katalogów w tekście.
Do zobaczenia w następnej lekcji.