Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerW 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.
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!
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.
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ą.
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.
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!
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.
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 sekcji opowiem troszkę o routingu.
My już o routingu mówiliśmy.
Tak naprawdę zaczęliśmy go robić przy
tworzeniu naszego pierwszego API, a potem jeszcze przy routing i foreach.
Natomiast chodzi mi tutaj o.
Proste nawigacja pomiędzy stronami. Więc w tym dziale.
Będziemy zajmowali się bezpośrednio komponentem takim jak next link.
Tu oraz rzeczami takimi jak animacje.
Czy dynamiczne podstrony.
Więc aby móc rozpocząć pracę nad tym działem muszę tutaj.
Zrobić troszkę wprowadzenia.
Czyli next.
Generalnie tak jak już mówiłem na początku.
Jest nad zbiorem View. W związku z czym.
WFS jest częścią Next.
Tak samo View Routing jest domyślnym routerem dla Nexta.
I to co globalny komponent.
Next Link.
Robi.
Hannah String to jest dokładnie to samo co robi ruter.
Czyli jeśli znasz ruter.
To spokojnie z tekstowymi linkami dasz sobie radę.
Dla tych, którzy niekoniecznie są z tym zaznajomieni.
Różnica między linkami a zwykłymi linkami.
Takimi jak ref.
Jest taka.
Że.
Te linki po pierwsze pozwalają nam zrobić.
Kilka fajnych rzeczy, jak na przykład
animacje pomiędzy przejściami między różnymi podstronami.
Ale zarówno są zgodne z duchem Enhancement.
To znaczy jeśli użytkownik ma wyłączone
JavaScript, to one się na serwerze tak czy siak prze kombinują na takie odnośniki.
Ale jeśli nasz użytkownik ma włączony
JavaScript, to po stronie klienta w przeglądarce one będą.
Takimi linkami, które będą symulować siły działania naszej aplikacji jakby to była
España, czyli Single Player Application bez przeładowywania strony.
W związku z czym na pewno lepiej jest używać stringów.
Jeśli chodzi o nawigację po naszej stronie, zwłaszcza, że jest to.
Standardowe rozwiązanie.
I też.
Dzięki niemu mamy inne benefity z.
Butów, w związku z czym nie będziemy korzystali tutaj z tego tylko na hosting.
No i next hosting przyjmuje jako parametr,
można byłoby powiedzieć atrybutu i to jest po prostu odnośnik.
Do danej podstrony.
Czyli to jest taki ekwiwalent page.
Dla max linka.
Czy jeśli chcielibyśmy przekierować na inną naszą podstronę tutaj otwórzmy.
Nasze pacze, widzimy.
Nasze Please login, to możemy tutaj wpisać Please log in i log in page.
Tak naprawdę mamy już chyba taki widok, w związku z czym.
Zaktualizuj po prostu nasz layout.
Ale w tym momencie powinno nam się to pokazać gdzieś tutaj.
Zobaczmy, gdzie ja wędrowałem.
Pod Januszem Kurczakiem.
I faktycznie tutaj jest.
Przycisk login i jego klikniemy.
Mamy tutaj taką animację przejścia.
Czyli jeśli tutaj wrócimy na.
Stronę główną.
To niestety tutaj kotwica nam się
zatrzymała i nasze API dalej troszkę powoli chodzi, w związku z czym.
Nie jest to najlepsze rozwiązanie.
Ale faktycznie widać to.
Przejście z jednego na drugie.
Tutaj teologia nam się pojawia z lekkim opóźnieniem.
I możemy wykorzystać to po prostu do.
Całej naszej nawigacji po.
Stronie, czyli ja sobie to skopiuje.
Przeniosę to sobie do naszego layoutu.
Do naszego Volta.
I tutaj login.
Po prostu zmienimy na.
Login.
I tak samo analogicznie możemy inne podstrony tutaj wyrenderować.
Register oczywiście one będą przekierowywać do station found.
Ale będą działały, w związku.
Z czym możemy je tutaj po prostu wypełnić.
Języki to jest coś, co też będę chciał zrobić w tym kursie.
To znaczy, abyśmy mogli przełączać się między.
Różnymi wersjami językowymi.
Klikając w odnośnik.
W związku z czym ten layout też będzie edytowany.
I jeśli chodzi o te side navigation.
Tutaj już raczej nie będziemy tego aktualizować, bo.
Ciężko wszystkie funkcjonalności Wikipedii tutaj odtworzyć.
Ale w tym momencie. Powinniśmy przynajmniej mieć.
Te dwie opcje jak.
Login i to faktycznie działa i register.
Nam nie zadziała więc mamy patent found
oraz możemy wrócić do naszego homepage do strony głównej.
Jeśli ten link nam działa działa. Co prawda troszkę.
Wolniej, bo mamy te zapytania.
Do.
Naszego API, ale to funkcjonuje.
Więc w następnej lekcji opowiem jak stworzyć animację pomiędzy.
Przejściami między jedną podstawową a drugą.
A w kolejnej stworzymy faktycznie rozwiązanie, dzięki któremu będziemy w
stanie wchodzić na różne podstrony Wikipedii, a nie tylko.
Odwiedzać na stronie głównej. Janusza Korczaka.
Zmiany wprowadzone w lekcji · 5 min
diff --git a/21/minipedia/layouts/default.vue b/21/minipedia/layouts/default.vue
index 073beea..8f39f82 100644
--- a/21/minipedia/layouts/default.vue
+++ b/21/minipedia/layouts/default.vue
@@ -61,14 +61,10 @@
<header class="banner">
<ul>
<li>
- <a href="#create-account">
- Create account
- </a>
+ <NuxtLink to="/register">Register</NuxtLink>
</li>
<li>
- <a href="#login">
- Log in
- </a>
+ <NuxtLink to="/please-login">Login</NuxtLink>
</li>
</ul>
diff --git a/21/minipedia/pages/index.vue b/21/minipedia/pages/index.vue
index 3e4feaa..061cc3c 100644
--- a/21/minipedia/pages/index.vue
+++ b/21/minipedia/pages/index.vue
@@ -3,7 +3,7 @@
<h1>
Janusz Korczak
</h1>
-
+
<span class="notice">From Wikipedia, the free encyclopedia</span>
<FullInfoBox :content="$store.state.fullInfo.general" />