Vue.js: Praca z narzędziem vue-cli

Vue.js 2.5.x

0:00Do tej pory w tym kursie pracowaliśmy w taki niezaawansowany sposób, w

0:04dość prosty, mianowicie mieliśmy stronę, czyli index.html,

0:08podłączony framework Vue w postaci zewnętrznego skryptu oraz wpisaliśmy

0:13sobie w tagu script cały nasz kod i ja specjalnie pokazywałem

0:17ci to w ten sposób dlatego, że nie chciałem już na początku zarzucić cię różnymi

0:21nowoczesnymi narzędziami i podejściami do budowania aplikacji internetowych, dlatego

0:25że nie wiem na jakim jesteś etapie przystępując do tego kursu, a wymagania do

0:29tego kursu były jedynie takie, aby znać język JavaScript, mieć jakieś doświadczenie

0:34w pracy z obiektowym modelem dokumentu, a więc jeżeli pracowałeś

0:38z takimi narzędziami jak na przykład webpack czy wpisałeś kod ES6, to uważam,

0:42że to co Ci pokazałem do tej pory, czyli zrozumienie sedna działania Vue zostanie

0:47ci w głowie i będziesz potrafił dodać to albo w zasadzie do tego dodać

0:51swój cały Work Flow, czyli będziesz potrafił wpisać kod w sposób nowoczesny

0:55z użyciem ES6 i tak dalej. Natomiast jeżeli jesteś osobą która jeszcze się

0:59nie nauczyła, nie poznała składni ES6 nie znasz narzędzi takich jak na

1:03przykład webpack, to myślę, że też zrobiłem dobrze dlatego, że

1:07nauczyłeś się w Vue.js na prostych przykładach, na prostym kodzie, a jeżeli

1:12poznasz te zaawansowane narzędzia to też będziesz mógł dopiero wtedy je wykorzystać. Nie

1:17zarzuciłem cię nimi od początku, mam nadzieję, że był to dobry wybór z mojej strony natomiast

1:21okazuje się, że z Vue podobnie jak z innymi frameworkami takimi jak na przykład React czy Angular, jak

1:26najbardziej można pracować w taki nowoczesny sposób dzieląc pliki na wiele różnych

1:30komponentów i tak dalej, więc będę chciał ci to pokazać w tej i kilku

1:34kolejnych lekcjach i do tego celu wykorzystamy sobie takie narzędzie, które nazywa się Vue CLI. Natomiast,

1:40żebyś dobrze zrozumiał to co będę chciał ci teraz pokazać byłoby super gdybyś

1:44miał jakieś podstawy webpack, czyli gdybyś kiedykolwiek korzystał z tego narzędzia i

1:48w kolejnych lekcjach będziemy pisać kod w standardzie EcmaScript6, chociaż

1:52to wcale nie jest wymagane, ale będzie po prostu wygodniej, więc żebyś go rozumiał

1:57też byłoby dobrze żebyś miał już z tym wcześniej do czynienia i te tematy co

2:01jest bardzo ważne poruszyłem już na eduweb.pl i kurs webpack'a znajdziesz

2:05pod takim adresem, trwa on niewiele ponad 3 godziny, więc tak naprawdę możesz

2:09go bardzo szybko przerobić, a wiele zrozumiesz i ten webpack przyda ci się w różnych innych

2:14jeszcze projektach i również kurs EcmaScript6 gdzie omawiam najnowszy

2:18standard języka JavaScript. W razie czego serdecznie ci te dwa kursy polecam.

2:23Natomiast teraz będę chciał żebyśmy sobie zainstalowali oficjalne narzędzie od Vue,

2:27które nazywa się Vue CLI i ono pozwoli nam bootstrap'ować nowy

2:31projekt, czyli utworzy nam po prostu już strukturę katalogów, plików i

2:35tak dalej, żebyśmy mogli wygodnie pracować i skonfiguruje nam webpack'a, czyli docelowo

2:40tak naprawdę będziemy korzystać z webpack'a. Webpack Dev Server i wielu innych rzeczy. Jeżeli

2:44to o czym mówię jest dla ciebie czymś nowym tak czy siak polecam obejrzeć tę i kilka

2:48kolejnych lekcji, bo będziesz w stanie pracować razem ze mną, nawet jeżeli nie

2:52rozumiesz w stu procentach jak działają te narzędzia. Jedno jest ważne,

2:56będziemy pracować w terminalu. Więc przejdę sobie do terminala i będąc w

3:00terminalu ja już przeszedłem do folderu 51, aczkolwiek to co wykonam akurat teraz,

3:04można zrobić będąc na dowolnym poziomie, wpiszemy sobie npm install

3:09minus g vue cli. Ważne,

3:13żebyś miał oczywiście Node.js, no i razem z tym zainstalowany npm. To nam

3:18zainstaluje globalnie takie polecenie, które nazywa się Vue i teraz

3:23będziemy mogli z niego korzystać. Jeżeli wcisnę tutaj enter, to widzimy w jaki

3:27sposób tutaj można z tego korzystać. Mamy init list build oraz help. Jeżeli

3:32wpiszemy vue list, to pokaże nam się lista wszystkich

3:36takich jakby szablonów projektu, z których można skorzystać. Ja

3:40będę chciał żebyśmy skorzystali z projektu webpack, ale możesz sobie tutaj również stworzyć

3:44projekt na przykład simple, bardzo łatwo, wpiszesz po prostu vue init simple.

3:49Natomiast ja wpiszę tutaj i zachęcam cię żebyś zrobił to razem ze mną, ale

3:53to już ważne, żeby być w tym katalogu 51, bo sama globalna instalacja

3:57jest niezależna od katalogu, ale teraz już jest ważne żeby tutaj być, wpiszemy

4:01vue init webpack i przyjrzymy się temu, co nam to narzędzie oferuje.

4:05Po pierwsze pytanie, czy chcę zainstalować to w folderze, w którym jestem. Wybieram yes,

4:09czyli bezpośrednio w folderze, do którego już przeszedłem. Nie będziemy tutaj

4:14tworzyć nowego katalogu. Project name 51, tutaj

4:18jest opis automatycznie z git'a jest pobierany adres email

4:22i teraz bardzo ważna rzecz. Na początku tego kursu mówiłem ci że mamy dwa rodzaje tak

4:27naprawdę Vue. Jeden jest to runtime, czyli to wszystko co nam wykonuje cały kod

4:31plus compiler do templatek, ale możemy również jeżeli będziemy

4:35kompilować templatki na etapie build'u, co teraz będziemy robić, nie używać

4:39kompilatora, czyli wybrać drugą opcję. Tutaj strzałkami sobie na klawiaturze przeskakujemy. Jeśli

4:44tą opcję wybiorę to nie będę mógł moich komponentach tworzyć w ogóle templatek,

4:48tak jak to robiliśmy do tej pory z użyciem tego elementu czy tej właściwości

4:53w zasadzie, template, gdzie w template string'u to wpisywaliśmy, ale będziemy to mogli

4:57robić w plikach z rozszerzeniem kropka vue i zobaczysz to już za moment, więc ja wybiorę

5:01tę drugą opcję. Pytanie czy chcemy zainstalować Vue Router,

5:05nie, aczkolwiek w jednej z kolejnych lekcji będziemy jeszcze z tego korzystać, ESlint

5:09nie i tutaj jeśli chodzi o testy na tym się nie będziemy skupiać i na końcu tutaj wybiorę

5:14jest, żebyśmy mogli wszystko zainstalować, czyli za nas to narzędzie

5:18wykona npm install i to może chwilę potrwać, natomiast zaraz zobaczysz jaka

5:22struktura nam się utworzy. Na pierwszy rzut oka może ona być przerażająca, ale

5:27większość rzeczy, które tam są to są rzeczy do których wcale nie będziesz musiał zaglądać, więc

5:31pokażę ci po prostu na co zwrócić uwagę i co nam się po prostu przyda i

5:35w kolejnych lekcjach również zobaczysz jak możemy budować projekt w oparciu o

5:39właśnie taką startową aplikację. Tutaj mamy napisane, że żeby

5:43rozpocząć wystarczy wpisać npm run dev. Natomiast ja bym chciał teraz

5:47przyjść do edytora i przejdziemy sobie do katalogu 51,

5:52dokładnie tutaj ta aplikacja się utworzyła. Jest tutaj wiele rzeczy, natomiast

5:57powiem ci od razu, że to co ciebie będzie interesowało to jest katalog src. Tutaj będziemy

6:01tworzyć całą naszą aplikację, a pozostałe rzeczy to są rzeczy konfiguracyjne, na przykład

6:05dla webpack'a, jeżeli znasz narzędzie webpack to będziesz mógł sobie tutaj

6:09pewne rzeczy zmienić. Natomiast jeżeli nie, nie musisz tymi katalogami

6:13się interesować zupełnie. Nasza aplikacja jest w katalogu src i jeżeli

6:18byśmy zajrzeli do package json, są tutaj trzy zadania, dev, start oraz

6:22build, start w zasadzie to jest samo co dev, więc mamy tutaj dev i build i dev

6:26pozwoli nam uruchomić serwer developmencki z użyciem webpack-dev-server, gdzie

6:31jeżeli coś zmienimy w pliku, tam będzie automatycznie to odświeżane będzie się bardzo wygodnie

6:35pracować. Natomiast kiedy nasza aplikacja będzie już przygotowana do tego,

6:39żeby ją wypuścić w świat to wykonamy sobie build i to nam stworzy już

6:43dosłownie kilka plików tej naszej aplikacji gotowych do umieszczenia w internecie

6:48natomiast na razie uruchomimy sobie dev, czyli wystarczy, że tak jak tutaj zasugerowano

6:52wpiszemy npm run dev i powinien nam się taki serwer uruchomić.

6:57Jak widzisz, otrzymaliśmy tutaj informację, że pod takim

7:01adresem nasz serwer się uruchomił i po przejściu na taką stronę widzimy

7:05aplikację Vue.js. Oczywiście nie musimy nic do tej strony dołączać

7:09w formie zewnętrznego skryptu, jeżeli przejdziemy do Vue, tutaj. Możemy

7:13wszystko sobie debugować, czyli aplikację, która już tutaj jest stworzona, ale

7:17jak ona wygląda, zaglądnijmy sobie tutaj, assets, tutaj jest tylko logo to nam

7:22jest niepotrzebne, nieistotne, istotny jest plik main.js, który

7:26jest kompilowany na samym początku. Od niego zaczyna webpack i w

7:30tym pliku za pomocą importów EcmaScript6, ważne żeby rozumieć jak to działa,

7:34importowane jest Vue, bo Vue jest tutaj zainstalowane z użyciem npm

7:38i w ten sposób się importuje, nie musimy dołączać skryptu do strony i tutaj

7:42importowana jest też aplikacja z katalogu tego samego jest to app kropka vue

7:47i właśnie w takich plikach Vue będziemy mogli pracować. Ważne jest to,

7:51że tutaj nie możemy już korzystać na tych aplikacjach z template, tak jak

7:55robiliśmy do tej pory, tylko musimy podawać funkcje renderującą, więc tutaj

7:59jest funkcja, która przyjmuje funkcję, to jest funkcja strzałkowa w ES6 i

8:03wywołujemy tę funkcję przekazując jej app i teraz pytanie co

8:07jest w tym app, zobacz, tutaj mamy taką oto aplikację,

8:11czyli wydawałoby się, że po zaimportowaniu w to miejsce, tu będzie jakaś dziwna rzecz,

8:15która jest przekazywana w to miejsce, ale warto wiedzieć, że webpack korzysta z tak zwanych

8:19loader'ów, więc w momencie kiedy importuje ten plik, przepuści go przez loader i

8:23to wszystko zostanie zamienione na kod JavaScript odpowiednio i dopiero tutaj

8:27zwrócone, więc jeżeli wiesz jak działa webpack to już wiesz teraz, że możesz nie

8:32korzystać z narzędzia Vue CLI, ale skonfigurować sobie webpack'a sam z użyciem

8:36Vue Loader'a. Nie będziemy jednak tego robić, pokażę ci natomiast jak wygląda

8:40struktura takiej aplikacji. Do tej pory tworzyliśmy templatkę albo bezpośrednio w

8:44drzewie DOM albo wpisywaliśmy ją elemencie, we właściwości

8:48template. Teraz będziemy pracować inaczej, mamy pliki gdzie mamy

8:52rozszerzenie Vue i tak będziemy tworzyć całą naszą aplikację. Natomiast, aby

8:57taki plik mógł być odpowiednio podświetlony, jak widzisz mój edytor wie gdzie jest

9:01skrypt, gdzie są style i tak dalej, to musisz do swojego edytora doinstalować

9:05sobie odpowiednie kolorowanie składni. Jeżeli wpiszesz w internecie nazwę

9:09twojego edytora Vue Syntax Highlightning to na pewno znajdziesz jak

9:13to zrobić. Zatem to wszystko co do tej pory wpisaliśmy w komponencie,

9:17kiedy robiliśmy na przykład Vue komponent i podawaliśmy obiekt konfiguracyjny

9:21będziemy mieli w tym miejscu, to jest dokładnie ten obiekt tutaj. Eksportujemy go z tego

9:26pliku za pomocą zapisu ES6. Tu możemy jeszcze inne rzeczy zaimportować

9:30i wstawić jako components. Bardzo ważna rzecz, templatka

9:34do tego konkretnego komponentu jest tutaj w elemencie template, czyli wszystko

9:38co tworzyliśmy do tej pory jako templatki będziemy stawiać to miejsce i co

9:42ciekawe możemy również dodać style, które odpowiednio przez webpack'a są z użyciem

9:46css-loader później zbierane i będą wstawiane na stronie, więc

9:51tutaj dużo za nas webpack robi jeżeli rozumie się to narzędzie to dużo łatwiej się pracuje

9:55i zobacz co robi ta aplikacja. Ona sobie importuje Hello World z components hello world

9:59i tutaj mamy taki oto plik. Cały jego template i jego logika

10:06jest w tym miejscu, tego komponentu tutaj dodajemy wszystko, czyli methods props i tak

10:10dalej i style, które mogą być, mogą nie być, zobaczysz to jeszcze w lekcjach kolejnych. Natomiast fajne

10:15jest to, że po tym serwerze, który uruchomiliśmy, możemy coś tutaj zmienić

10:19i jeżeli ja zapiszę to to na stronie się automatycznie odświeża. Czasami nawet przeglądarka

10:24nie jest przeładowywana, ale działa tutaj tak zwany hot module reloading i jest to

10:28wstrzykiwane na stronę, więc dużo prościej się z tym pracuje. Dodatkowo jeszcze

10:32warto wspomnieć, że to wszystko jest kompilowane do kodu EcmaScript5, więc możemy korzystać z

10:36takich nowoczesnych zapisów ES6 i nie martwić się o to, czy to będzie działać w starszych

10:41przeglądarkach. To wszystko za nas robi webpack skonfigurowany z użyciem Vue CLI

10:45i wiem, że to jest dużo jak na początek, jeżeli jeszcze z tym nie pracowałeś,

10:49ale pokażę ci w lekcji kolejnej jak możemy counter, czyli nasz komponent,

10:53stworzony wcześniej w taki sposób przepisać żeby go tutaj po prostu umieścić i

10:57żeby to wszystko działało poprawnie, więc zapraszam cię do kolejnej lekcji gdzie będziemy

11:02ten temat kontynuować.