Nuxt.js: Tworzenie nowego projektu
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 tej lekcji stworzymy nasz.
Pierwszy projekt. Nexta i faktycznie.
Będzie to ten projekt,
o którym już wspomniałem wcześniej w poprzednich lekcjach.
I słowem wstępu.
Aby pracować z następna to konieczna jest też.
Znajomość MPM a w pewnym sensie.
Jako, że znajomość BPMN to też w pewnym sensie znajomość Noda.
Nie musimy oczywiście potrafić nią programować, ale wymagane.
Jest to środowisko aby tworzyć ten projekt.
I go uruchamiać.
W związku z czym ja chciałem tutaj jeszcze przedstawić.
Z jakiej wersji Jamesa będę korzystał w tym kursie.
Będzie to.
Obecnie wersja, która ma znacznik LTS, czyli Long Time.
Support i ja korzystam z czegoś takiego jak NPM, czyli.
Można to nazwać skrótem od My Name.
Czy jest to po prostu manager wersji Noda?
Czyli w zależności od projektu jesteśmy.
W stanie zainstalować sobie inną wersję Jamesa?
Jeżeli nie znamy Dockera
to jest to bardzo fajne rozwiązanie aby po prostu z tymi zależnościami.
Więc ja tutaj napiszę wam install.
14 16 0, ponieważ jest to w tym momencie najnowsza wersja.
Noda Long time.
Support.
Tutaj oczywiście przez dwa, ale trzeba to
napisać, bo w przeciwnym wypadku nasze polecenie nie zadziała.
Ja tutaj już miałem zainstalowaną tą wersję i.
Faktycznie automatycznie się to. Przełączył.
Jeżeli by się nam nie przyłączyło to możemy też wpisać albo musimy podać.
Tutaj tą wersję jawnie.
Jak zainstalować nie wiem.
To też zapraszam do odnośników.
Tam będzie trzeba po prostu uruchomić taki skrypt na githubie na Waszym urządzeniu.
Bądź po prostu zainstaluj.
Je z oficjalnej strony.
Biorąc pod uwagę, aby wziąć wersja przynajmniej LTS.
Co jest istotne, to Next nie będzie działał na wersji.
Mniejszej niż 10.
Wersja noda 8 ma już znacznik EOL, czyli End of Life.
W związku z czym jest można korzystać z niej tylko i wyłącznie do.
Pracy nad samym. Następcą, ale.
Nie do uruchamiania go jako aplikacji.
Więc aby zainstalować Nexta potrzebujemy
użyć takiej właściwości jak npm init i tutaj.
NPM init.
Podajemy odnośnik do nazwy paczki w jego.
Najnowszej wersji i ostatni.
Parametr dir jak directory to jest nazwa
projektu, nazwa katalogu, w którym nasz projekt będzie się znajdował.
Czyli jeśli wpiszemy npm init.
Next app latest.
I wpiszemy wikipedia to.
Uruchomi się tutaj taki. Loader.
To się będzie. Ładowało i faktycznie.
Za chwilkę będziemy mieli stworzoną naszą. Pierwszą.
Aplikację w. Pakiecie.
Oczywiście będzie ona pusta.
Ale dzięki niej będziemy mogli wypełnić ją tym naszym statycznym HTML em.
Wikipedii, o której już troszkę powiedzieliśmy.
I tutaj będziemy musieli wpisać parę informacji.
Na temat naszego. Projektu, czyli np.
Project. Nazwa projektu Wikipedia.
W czym chcemy programować?
Ja oczywiście wybiorę tutaj. Najprostsza z.
Możliwych konfiguracji,
czyli JavaScript, ponieważ nie zakładam, że każdy musi znać
taki skrypt, więc będziemy to upraszczać tak samo.
NPM jako takie klasyczne.
Narzędzie Juan Framework.
Czyli jeżeli chcielibyśmy korzystać z naszych komponentów w taki sposób.
Że mamy gotowe, przygotowane przez
nerdów bloki, które możemy użyć na naszej aplikacji, to możemy tutaj wybrać.
Jako że my pracujemy na czystym HTML i CSS oraz na View, no to wybierzemy tutaj.
I jako następny krok.
Możemy wybrać jakie moduły chcemy zawrzeć w naszym na chrzcie.
Czyli jeśli chcemy.
Mieć od razu skonfigurowane PWA, czyli.
Web apps.
Które dają nam np. pracę w.
Trybie offline.
Na urządzeniach mobilnych
czy splash screen i dostęp do notyfikacji, to możemy tutaj to sobie zadeklarować.
Ja tego nie będę włączał, ponieważ PWA nie jest tematem, który będziemy poruszać.
W tym kursie. Ale sami możemy sobie tutaj załadować.
Jest to po prostu takie narzędzie, które. Wykonuje za.
Nas polecenia zapytania http.
I też akcją jest korzystanie.
No i też akcja jest wykorzystywane.
Jako wewnętrzne narzędzie,
gdy Next wykonuje zapytania do serwera, na przykład na backend.
W związku z czym spacją zaznaczyłem sobie tutaj.
Accessa i enterem.
Możemy zatwierdzić nasz. Wybór.
Jeżeli chodzi o limiter to. Weźmy.
S linka.
Twittera nie będziemy włączać, ponieważ czasami dziwnie formatuje tekst.
Jest on o tyle fajny, że jeżeli mamy pracę nad projektem w.
Kilku osobach to.
Zawsze będziemy mieli takie same formatowanie tekstu.
Testing framework.
Ja preferuję osobiście resta.
Ale też na potrzeby kursu wybierzemy.
No i jeśli chodzi o rendering mode.
Weźmy SSR i sesję.
Jeśli chodzi o rozwinięcie tych skrótów to jest to server side rendering, czyli
renderowanie komponentów na backend i wypróbowanie gotowego HTMLa już.
Podczas pierwszego bloku danych, które otrzymujemy z backendu.
I server side. Generation.
Jest to tak naprawdę pre rendering.
Jeśli chodzi o to.
Jest to rodzaj aplikacji, w której na przykład routing odbywa się.
Po stronie klienta.
Czyli niekoniecznie widać przeładowywania między stronami.
Ja tutaj ustawię typ SARE.
Ponieważ jest on bardziej.
Szeroki jeżeli chodzi o swoje możliwości.
Są faktycznie fajne jeżeli mielibyśmy
prosty landing page, a nie pełnoprawną aplikację jak Liberia.
Jeśli chodzi o deployment, możemy to w tym momencie.
Zignorować, ale wybierzemy serwer.
Serwer jest nam potrzebny do.
Generowania komponentów w. Locie.
Właśnie na pakiecie.
No i jeśli chodzi o narzędzia deweloperskie.
Możemy tutaj wybrać czy jest konflikt.
Nie ma to tak naprawdę większego znaczenia.
Continuous Integration ignorujemy w tym momencie i Version Control System.
Tutaj korzystamy.
Z Gita.
Jeśli chodzi o. Repozytorium, ale w samym.
Projekcie. Na kota.
Nie potrzebujemy go, ponieważ mamy repozytorium.
Ponad tym projektem.
Jeśli chcielibyście faktycznie.
Pracować na 12,
jeżeli robicie to równolegle ze mną tutaj zachęcam do zaznaczenia gita.
Ja wybiorę.
No i w tym momencie.
Odpala się.
Instalator, który troszkę nam tutaj będzie
mielił i pobierał, ale za chwilę już pojawi się cała struktura katalogów tutaj.
I jak widzimy jest tutaj.
Naprawdę sporo plików.
Ta aplikacja będzie bardzo prosta.
Ponieważ jest to taki szablon, który
domyślnie instalowany jest właśnie gdy uruchomimy taką.
Komendę.
Będziemy przechodzić przez te katalogi.
W kolejnej lekcji chciałbym tylko poczekać.
Aż wszystkie aplikacje się tutaj.
Zainstalują i gdy to się skończy.
Otrzymujemy taką właśnie informację.
Jak zacząć pracę z tekstem?
Czyli to, co musimy zrobić na top.
Jeśli wpiszemy LS, czyli list.
Można powiedzieć list directory.
To widzimy, że w głównym katalogu pojawił
się nam katalog mini media i aby do niego przejść.
Możemy wykorzystać. Polecenie CD mini Media albo po prostu.
Tutaj kliknąć na lewej stronie.
Drzewka.
I aby uruchomić nasz projekt.
Wystarczy wpisać polecenie npm run def.
Ja tutaj jeszcze wyłączę synka, abyśmy
mieli pewność, że tutaj porty nam nie konfrontują.
I wpisując npm run, które faktycznie jest wygenerowane wewnątrz pakiet Pythona.
Tak jak wszystkie inne aplikacje NPM owe,
tutaj możemy sobie podejrzeć wszystkie skrypty, które się dzieją.
Zobaczymy taki oto baner z informacją gdzie nasz Sphere serwer jest tworzony.
Tu mamy jakieś wzorniki.
Wydaje mi się, że jest to spowodowane tym, że jest configure, ale tak czy siak.
Aplikacja nam się zbudowała.
Generalnie jeżeli nie macie nigdy.
Czerwonych tutaj błędów to nie musicie się martwić i jeżeli jest napisane Seeing on
tutaj, nazwa waszej strony oraz port to nie ma czym się przejmować.
I jeśli.
Odświeżamy stronę to widzimy że nie ma już LPT ponieważ nie ma tam synka.
Jest za to.
Nazwa naszego projektu i prosty szablon Wu, który wskazuje na to, że.
Faktycznie stworzyliśmy nasz pierwszy produkt.
Na chrzcie.
Domyślnie otwierany jest on na.
Porcie localhost 3000.
Oczywiście to można.
Skonfigurować i o tym też będziemy mówili.
Ale jeśli z jakiegoś powodu port 3000 jest.
Zajęty na Waszej maszynie, to oczywiście
port, który został użyty zostanie tutaj wypisane.
I klikając Control oraz klik na link bądź komend.
KLIK na link. Jeżeli pracujecie na Maku.
To. Przeniesie Was na nowo zbudowany serwer.
To wszystko w tej lekcji. Zapraszam Cię do.
Następnej, gdzie będziemy omawiali strukturę katalogów i jak.
Poruszać się po naszym nowo stworzonym projekcie.
Wikipedii.