Nuxt.js: Rozszerzenia do Vue

0:00Cześć! W tej sekcji odejdziemy na.

0:01Chwilę od komponentów i frontendu nowego podejścia do pracy z tekstem.

0:07I w tej lekcji skupimy się na sekcji, którą już troszkę omówiliśmy w.

0:10Poprzednich lekcjach.

0:12Czyli plugina.

0:13Jest to o tyle proste, że możemy zarejestrować pluginy do wł czy.

0:19Nie tylko do filmu.

0:21W bardzo prosty sposób.

0:22I tak naprawdę Next przy początkowym.

0:27Ustawieniu.

0:29Mógłby już tutaj nam wypełnić.

0:30To pole w pliku config.

0:32To jest jakimiś modułami, które mielibyśmy już dostępne.

0:37I tutaj widzę, że akurat Axis jest.

0:39Teraz ładowane jako moduł, niejako plugin.

0:43Są pewne różnice wewnętrzne.

0:45Co do tego jak one się zachowują. Ale jeśli przejdziemy.

0:48Tutaj do dokumentacji to zobaczymy, że.

0:52Mamy możliwość definiowania pluginów różnego typu.

0:56To znaczy.

0:58Pluginy możemy definiować w taki sposób,

1:00że jest to tablica pewnych obiektów, gdzie musimy podać źródło naszego pluginu.

1:06Który jest zwykłym.

1:06Plikiem tekstowym, który sami sobie tworzymy.

1:09I musimy wskazać.

1:11W jakim trybie ma ten plugin zostać użyty, ponieważ.

1:14Niektóre.

1:16Biblioteki będziemy używali tylko.

1:17I wyłącznie na froncie, jak np.

1:20w polu TIP, które właśnie w tym przykładzie będziemy omawiać.

1:26Czy też.

1:28Typowo backend owe rozwiązania jak np.

1:31.

1:33Pluginy, które mają się wywoływać po

1:35stronie serwera w async, data czy w innych krokach, o których też już mówiliśmy i o

1:41których będziemy mówić dalej, gdy będziemy ich używać.

1:44No i oczywiście jest też.

1:45Tryb globalny, to znaczy, że działa zarówno dla klienta jak i serwera.

1:51Tutaj widzę.

1:52Że akurat Axis jest załadowany poprzez pluginy.

1:55U nas załadowany jest poprzez next, jest akcja.

1:59Prawdopodobnie to jest nowsza wersja, a to było jakąś alternatywną opcją, jeżeli nie

2:05korzystamy z wbudowanych generatorów projektów.

2:09No ale stwórzmy po prostu.

2:12Podstawowy plugin.

2:14Który będzie.

2:16Będę robił takie protip czyli jeżeli wyjdziemy na Witolda.

2:20Jest to taka paczka npm owa która jest rozszerzeniem dla view.

2:24Możemy troszkę teraz szerzej, żeby widzieć co tu się dzieje.

2:29Które pozwala pokazywać to tipi.

2:32Jej instalacja jest banalnie prosta.

2:34Więc tak też zrobimy.

2:36Uruchomimy npm install z odpowiednią nazwą.

2:39Tutaj otworzę sobie nowy terminal, żeby

2:40nie zamykać naszego nexta i po prostu wklejam.

2:46W odpowiednim.

2:46Katalogu mini pdf lpm install save vito tip.

2:50I w międzyczasie jak to.

2:51Się nam ładuje. To ja w naszym.

2:53Katalogu plugins stworzę nowy plik.

2:56I będzie to po prostu wina Tulip.

2:59Czy jest?

3:02I tak jak tutaj jest to zadeklarowane.

3:04Zrobimy prosty import.

3:07I zarejestrujemy go w www.

3:10Czyli zapiszemy to.

3:12I większość prasy już jest za nami.

3:15Musimy jeszcze tylko wskazać w.

3:17Pliku na skąd i gdzie jest tak jak tutaj widzieliśmy w dokumentacji

3:21ścieżkę do danego pliku i tryb w jakim się renderuje.

3:24Pliki są typowo frontową rzeczą.

3:26W związku z czym nie ma sensu umieszczać

3:27ich na serwerze, więc możemy jawnie powiedzieć, że jest to paczka klienckie.

3:33Więc tworzymy obiekt Souls jako klucz główny katalog plugins.

3:39Witold Czy jest.

3:44Model klient zapisujemy.

3:50Przejdźmy z powrotem do serwera, żeby zobaczyć czy wszystko działa.

3:56I Witold jest akurat też podany jako przykład.

4:00Tutaj w dokumentacji tak mi się wydaje.

4:02Chyba w tym pliku było to wskazane.

4:06Że w taki właśnie sposób możemy frontend do zależności ładować do nexta.

4:10No i teraz co możemy z tym zrobić?

4:12Zobaczmy sobie dokumentację tego modułu.

4:16I teraz na dowolnym elemencie HTML.

4:17Owym możemy wstawić nasz własny z naszym własnym tekstem.

4:21I oczywiście można go custom złamać itd.

4:23My tego robić nie będziemy.

4:24Ale zdecydowanie użyjemy tego tipa, żeby sprawdzić czy to faktycznie zadziałało.

4:30Czyli teraz jeśli sobie zrobimy. Np.

4:32na spanie from Wikipedia friends Xperia.

4:37Tutaj widzę to tip.

4:41Please support the original source of the data.

4:49Zapiszemy.

4:51I oczywiście to musi być jako string, bo tutaj Witold jest dyrektywą WU.

4:57Zapisujemy.

4:59I w tym momencie.

5:00Gdy jedziemy na tego pana wikipedia na skroty.

5:04Jak widać faktycznie ten protip nie jest

5:07on jakoś ładnie instalowany, ponieważ brakuje mu prawdopodobnie CSS ów.

5:13Natomiast tak jak widzimy.

5:14Jesteśmy w stanie bez problemu załadować dowolne pluginy View.

5:22W naszej aplikacji znak STOP.

5:25Ponieważ jeżeli byśmy pozbyli.

5:26Się tutaj tego znaku skonfiguruj s.

5:30Czyli tutaj to sobie komentujemy, zapiszemy.

5:34To teraz ta dyrektywa nie ma prawa działać, ponieważ nie jest zadeklarowana.

5:39I prawdopodobnie.

5:39Nasza aplikacja się wysypie jak to się tylko przewiduje.

5:43No to zobaczymy czy.

5:47Czy coś się złego stanie.

5:49Nie, nasza aplikacja się nie zepsuła.

5:52Zobaczmy czy jest jakiś błąd w konsoli.

5:55Tak fajne, ale sama aplikacja się nie wywróciła.

6:00Jest to po prostu błąd Java skryptowy.

6:02Który może wpłynąć na.

6:03Działanie naszej aplikacji. Jeżeli np.

6:05w runtime mielibyśmy jakieś zależności,

6:08które nie załadują się właśnie przez brak tejże dyrektywy.

6:12W związku z czym tak właśnie możemy.

6:15Deklarować nowe pluginy do WP czy generalnie do Nexta.

6:21I mogą to być dowolne.

6:23Paczki mp move.

6:25Tylko musimy pamiętać, aby umieszczać daną paczkę w zależności od jej przeznaczenia

6:30albo po stronie klienckiej, albo po stronie serwera.

6:34Szczerze mówiąc nie korzystam tak często z pluginów.

6:37Bo większość rzeczy.

6:38Jest już w tym momencie.

6:39Pisana na modułach i modułów.

6:42Nie trzeba tak bardzo konfigurować. Wystarczy.

6:44Zaimportować. Tutaj nazwę tego modułu

6:47i ewentualnie skonfigurować go tutaj dodatkowymi opcjami.

6:52I community pomimo tego, że jest mniejsze.

6:54Niż to jak.

6:56Nexta.

6:57Zdecydowanie pracuję nad tymi modułami, więc pluginy są

7:02bardziej do sytuacji kiedy chcemy sami stworzyć.

7:05Jakiś plugin do. Nexta.

7:07Nie chcemy tworzyć całego.

7:08Modułu, ponieważ jest to troszkę bardziej

7:10czasochłonne i niesie ze sobą obowiązek rozumowania.

7:14Wersjonowanie Nexta.

7:17A chcemy mieć po.

7:18Prostu rozszerzenie naszych funkcjonalności.

7:21W kolejnej lekcji zajmiemy się bind modułami.

7:24Czyli modułami, które wykonują się po stronie serwera.

7:27I służą przede wszystkim

7:29zarządzaniu projektem na etapie developerskim, niekoniecznie

7:33w runtime, czyli niekoniecznie będziemy tam umieszczać moduły związane z czymś, co

7:38użytkownik będzie docelowo widział, ale o tym w następnej lekcji.