Nuxt.js: Konfiguracja

0:00Cześć!

0:00W tej lekcji omówię krótko różne możliwości.

0:03Konfiguracyjne, które znajdziemy w pliku z konfiguracją.

0:07I przede wszystkim różne właściwości, z których będziemy też korzystać.

0:12Podczas tego kursu.

0:13Czyli pierwsza rzecz, która nam rzuca tutaj w oczy jest właściwość HEAD

0:17i jest to konfiguracja, którą oczywiście też możemy zrobić na poziomie page.

0:22Czyli indywidualnego komponentu, aby tekst był inny dla każdej innej podstrony.

0:27Natomiast jeżeli pragniemy takiego

0:29globalnego globalnego SCHEDA, czyli nawet w zależności od tego.

0:35Jaki layout chcemy mieć, to

0:38HEAD będzie takim pierwszym obiektem, który ma pierwszeństwo.

0:43Nad wszystkim i dopiero później jest opisywany przez layouty czy page.

0:48I możemy tutaj zadeklarować np.

0:49samą ikonkę, co też.

0:50Zrobimy przy etapie przenoszenia aplikacji obecnej.

0:56Do Nexta.

0:58Co jest, jeśli jesteśmy w stanie zadeklarować ścieżkę do globalnych CSS ów?

1:03Nie będziemy tego tutaj chyba robić, bo

1:05mamy to zadeklarowane w prostych plikach i tak.

1:08Naprawdę w sam layout możemy wrzucić nasze.

1:11Style. Ale jeśli chcielibyśmy np.

1:14stworzyć jakieś helper.

1:17Typu Visual hyde czy screen.

1:23Only to możemy użyć takich klas właśnie w

1:26takim globalnym pliku i wtedy w dowolnym widoku, w dowolnym miejscu w całym naszym.

1:30Kodzie źródłowym będziemy mogli takiej klasy użyć.

1:33W plugin.

1:33Jak jesteśmy zadeklarować różne pluginy, które będą rozszerzały View.

1:37O komponentach troszkę już mówiliśmy.

1:39Build modules to są moduły, które faktycznie są uruchamiane podczas np.

1:47npm randek i będziemy taki.

1:49Moduł tworzyli, który pozwoli nam

1:51sprawdzić czy nasze zmienne środowiskowe, o których już mówiliśmy w poprzedniej

1:54lekcji, są poprawnie skonfigurowane, tak aby łatwo zarządzać plikami.

2:00VI.

2:01Które jak już wspomniałem nie są zapisywane do repozytoriów.

2:04W związku z czym każdy z developerów musi

2:05je w pewien sposób skonfigurować własnoręcznie.

2:09I dalej moduły, czyli ten.

2:11Basic Auth module, który zadeklarowaliśmy sobie i pobraliśmy go.

2:16Z npm. A no to tutaj możemy je zarejestrować.

2:20I każdy z takich modułów może mieć własne swoje opcje konfiguracyjne.

2:23Modułów tekstowych samych w sobie tworzyć nie będziemy.

2:26Skupimy się tylko i wyłącznie na billboardach,

2:29a zrobimy to dlatego, ponieważ moduły będą się troszkę zmieniały jeżeli chodzi o

2:34swoje funkcjonowanie w trójce i jest to naprawdę dosyć szeroki temat.

2:39Tworzenie paczek dla miasta jest już troszkę większym wyzwaniem,

2:43w związku z czym tego w tym kursie nie znajdziemy.

2:46Ale jest oczywiście odnośnik do.

2:47Dokumentacji, gdzie wszystko jest bardzo

2:49ładnie opisane, więc możemy to zrobić w tamtym miejscu.

2:53Tutaj jest konfiguracja DAX i Osa no i ten.

2:57Build w którym zadeklarowaliśmy pluginy da

3:00wiele, aby pozbyć się błędu z początku tego kursu.

3:06Co możemy zrobić to wejść po prostu w

3:08dokumentację skonfiguruje i tutaj mamy to wszystko opisane.

3:12Czyli na przykładzie jesteśmy w stanie

3:14zadeklarować różne aliasy, których używając w kodzie będziemy mogli.

3:20Odwoływać się do innych miejsc w naszym kodzie źródłowym.

3:23Czy jeśli chcielibyśmy odwoływać się do

3:25naszych styli poprzez styl slash nazwa pliku, a wszystkie style.

3:30Znajdowałyby się w katalogu assets style,

3:32czyli po prostu tutaj jak byśmy robili, to możemy to stworzyć w tym miejscu.

3:39Natomiast nie jest to potrzebne domyślnie.

3:42Ponieważ ma pewne aliasy zadeklarowane domyślnie w Wildzie.

3:48Możemy rozszerzać konfigurację. Takową.

3:50Która przydaje się np.

3:52przy.

3:53CSS modules.

3:55Aby zmniejszać bandit side.

3:57I tak samo globalne CSS.

3:58Możemy zadeklarować.

4:00W zmiennej def, która domyślnie działa tak.

4:03Że w zależności od node w jej zmiennej

4:06środowiskowej, która jest globalna dla całego noda będzie przełączane flaga def.

4:10Która wskazuje czy.

4:12Ma uruchomić się w trybie developerskim czy produkcyjnym.

4:16I oczywiście możemy sobie to skopiować tutaj.

4:19Na przykład na samą górę naszego pliku.

4:23I po przecinku. Też.

4:25Oczywiście możemy to. Zostawić tak jak jest.

4:26Albo jeżeli chcielibyśmy aby zawsze był.

4:28Uruchamiane w trybie. Deweloperskim.

4:30To możemy tutaj zakodować wartość boolean, czyli wartość logiczną.

4:35Tak nie trudno.

4:38Zostawmy to na wartości domyślnej.

4:44Głębi też możemy tutaj zadeklarować.

4:46Różne zmienne środowiskowe, które.

4:48Są potrzebne tylko na.

4:49Etapie budowania.

4:50Plików, ale jest to taka troszkę niepotrzebna.

4:53Właściwość, ponieważ.

4:54Też domyślnie jest tych opcji naprawdę, naprawdę bardzo dużo.

4:58To co ja chciałem tutaj pokazać i co jest dosyć ciekawe to na przykład właściwość

5:02server, czyli jeśli chcielibyśmy korzystać z https.

5:06Oczywiście możemy tutaj sobie podać ścieżkę do naszych kluczy i

5:10certyfikatów, aby nasza strona miała tutaj tą kuleczkę tak jak.

5:15Na przykład toksyn AXA.

5:17Oczywiście tutaj localhost w tym momencie

5:19tego nie ma, bo pracujemy na protokole HTTP.

5:23Ale możemy też wykorzystać

5:25właściwość server do zmiany domyślnego portu aplikacji.

5:28Czyli jeśli tutaj wpiszemy serwer i port np.

5:33na 8000 zapiszemy.

5:37To w tym momencie nasza aplikacja nie będzie już.

5:39Uruchamiana na porcie 3000.

5:41Jak widzimy to już przestało działać, lecz na.

5:44Porcie 8000.

5:47I generalnie jeżeli chodzi o taką globalną zmianę konfiguracji działania Nexta, to

5:52next config jest miejscem, w którym trzeba to zrobić.

5:56Oczywiście tak jak wspominałem nie

5:58będziemy omawiali wszystkich tych właściwości,

6:01bo w zależności od problemu po prostu różne właściwości są nam potrzebne.

6:06Będziemy na pewno do tego pliku jeszcze wracać konfigurując inne.

6:09Rzeczy potrzebne do praktycznej pracy nad.

6:12Projektem i wtedy.

6:15Ale jeśli zapamiętasz, że nawet konfiguracja z głównym plikiem, w którym

6:18możemy wyczytać wszystko o naszej aplikacji.

6:21To bez problemu poradzisz sobie z dalszymi

6:24wyzwaniami, które Next będzie nam oferował.