Generowanie projektu z wykorzystaniem Vue cli jest bardzo proste. Mimo to pokażę Ci jak to zrobić i z jakich ustawień korzystam na codzień. Ponadto zmienię trochę strukturę plików i pokażę w jaki sposób ja ułatwiam sobie pracę z tym frameworkiem.

Zanim zaczniemy pisać kod.

Zanim zaczniemy myśleć o generowaniu projektu trzeba sprawdzić czy na naszej maszynie mamy wszystko co potrzebne. Pominę etap instalacji Nodejs ale gdyby ktoś nie wiedział jak to zrobić to instrukcję można znaleźć tutaj.

Vue cli

Do generowania projektów Vue potrzebujemy Vue cli. Więcej na temat tego narzędzia można znaleźć tutaj. Warto zerknąć bo poza tym, że to narzędzie pozwala nam na generowanie projektu to posiada też inne funkcje jak choćby dodawanie nowych modułów do istniejących już projektów. Trzeba z tym jednak uważać bo nie zawsze udaje się to zrobić poprawnie i czasami mogą się posypać błędy.

Dobra przejdźmy do instalacji. Uruchom konsolę i wpisz:

npm install -g @vue/cli

Po krótkiej chwili instalacja zostanie zakończona a Ty będziesz miał dostęp do komendy „vue” w swojej konsoli. Nic nie stoi teraz na przeszkodzie aby stworzyć projekt z użyciem tego narzędzia.

Generowanie projektu za pomocą Vue cli

Zacznijmy od znalezienia miejsca dla naszego projektu. U mnie będzie to folder frontend. Otwórz terminal i przejdź do folderu w którym Ty chcesz mieć swój projekt. Następnie wpisz poniższą komendę:

vue create carreps

W konsoli zobaczysz coś podobnego do tego co widzisz na poniższym screenie. Coś podobnego bo przypuszczam, że nie będziesz mieć żadnych zapisanych presetów projektów. U Ciebie prawdopodobnie będzie tylko preset default oraz opcja „Manually selec features”. Polecam skorzystać z tej drugiej gdzie można wybrać z czego będziemy korzystać podczas pracy nad projektem.

generowanie projektu wybór presetu
Generowanie projektu – wybór presetu

Skoro tutaj jest wszystko wiadome to wybierzmy ostatnią opcję czyli ręczny wybór. Po menu poruszamy się strzałkami, zatwierdzamy enterem a przy opcji wielokrotnego wyboru zatwierdzamy każdy spacją.

Na kolejnym ekranie wybieramy wszystkie potrzebne w naszym projekcie elementy. Na poniższym screenie widać wszystkie „ficzery”, których będziemy używać przy tworzeniu aplikacji

generowanie projektu - features
Generowanie projektu – wybór elementów

Tak jak wspomniałem w jednym z poprzednich postów, ten projekt będzie prosty i nie chcę tam wykorzystywać „zbędnych” zaśmiecaczy. Jednak warto tutaj dodać jedną rzecz. Uważam, że testy to absolutnie niezbędna rzecz w każdej aplikacji ale dodawanie jej na etapie uczenia się podstaw frameworka staje się trochę problematyczne. Jeżeli natomiast chodzi o TypeScripta to sądzę, że spokojnie można go pominąć w tym momencie i poczekać na wydanie wersji 3.0 Vue.

Następnie pojawi się seria ekranów z różnymi pytaniami. Poniżej po prostu wrzucę wszystkie te screeny po kolei a pod nimi wskażę, którą opcję wybieram. Poniżej tych screenów jest wyjaśnienie do niektórych z moich wyborów.

generowanie projektu history mode
History mode – Yes
generowanie projektu node sass
Node-sass
generowanie projektu - eslin
ESLint + Airbnb config
generowanie projektu lint on save
Lint on save
generowanie projektu config
Configs in dedicated files

Na koniec jeszcze zobaczymy pytanie czy chcemy zapisać nasz wybór jako nowy preset. Jeżeli tak to nadajemy mu jakąś nazwę i przy następnym projekcie nie będziemy musieli wybierać wszystkich tych opcji ponownie. Wystarczy wybrać preset a cli już automatycznie zainstaluje wybrane przez nas elementy.

Krótkie wyjaśnienie

No dobra czas na krótkie wytłumaczenie moich wyborów. Zacznijmy od history mode. Domyślnie Vue używa znaku # w adresie URL. Wtedy taki URL wygląda w następujący sposób https://oursite.com/#/users. Pytanie po co to? Otóż działa tutaj pewien ciekawy mechanizm. Mianowicie wpisanie do adresu /#/users nie spowoduje wysłania zapytania do serwera. Mając znak # w adresie URL, zmienianie czegokolwiek za nim nie wymusi na przeglądarce wysłania zapytania do serwera. Dlatego też domyślnie Vue korzysta właśnie z takiego rozwiązania. Osobiście jednak nie za bardzo przepadam za tym znakiem w moich adresach URL. Z pomocą przychodzi właśnie history mode, który pozwala na tworzenie routingu po stronie klienta bez znaku #. Oczywiście wymaga to pewnej konfiguracji także po stronie serwera ale o tym napiszę w części backendowej.

Dlaczego osobne pliki konfiguracyjne?

Reszty rzeczy raczej opisywać nie muszę. Chociaż chciałbym jeszcze kilka słów napisać o tym dlaczego wszystkie configi do narzędzi takich jak ESLint zawsze trzymam w innych plikach a nie w package.json. Dla mnie rzecz jest oczywista ale jak się okazuje nie dla wszystkich taka jest. Uważam, że osobne pliki dla każdego narzędzia z jakiego korzystamy to nie jakaś dziwna fanaberia a wymóg. Bardzo ciężko pracuje się z plikiem, który ma kilkaset linii a widziałem już package.json o takiej wielkości. Ciężko tam cokolwiek znaleźć jeżeli dokładnie nie wiemy czego szukamy. Dużo prościej jest gdy mamy powiedzmy trzy lub cztery pliki konfiguracyjne do najważniejszych narzędzi po kilkanaście czy tam kilkadziesiąt linii.

Generowanie projektu – struktura plików

Skoro już mamy za sobą całe generowanie projektu, przyjrzyjmy się teraz temu co otrzymaliśmy na wyjściu.

Wygenerowana struktura projektu

Podział jest dość prosty. Mamy folder public z głównym plikiem HTML oraz plik src gdzie są pliki źródłowe naszej aplikacji. Ponadto w głównym folderze mamy jeszcze configi i inne potrzebne pliki, którym się teraz nie będziemy przyglądać. Taka struktura jest jak najbardziej ok, ale chciałbym wprowadzić kilka zmian. Zacznijmy od tego, że w folderze src/assets przydałyby się osobne foldery na obrazy, fonty i inne potrzebne pliki. Drugim potrzebnym krokiem jest wydzielenie folderów dla routera oraz Vuexa. Kolejną sprawą są komponenty. Chciałbym aby każdy komponent miał swój folder oraz aby łatwym aliasem dało się importować je wszystkie.

Poprawiona struktura folderów

Poprawiona struktura folderów

Screen jak dobrze widać jest wrzucany jeszcze przed wypchaniem zmian do repozytorium a to wszystko po to aby dobrze było widać gdzie zostały wprowadzone zmiany. Zacznijmy może od góry. W folderze assets, dodajemy dwa nowe foldery czyli images i fonts. Póki co ten drugi jest pusty ale w przyszłości coś tam wrzucimy. Dalej mamy ważniejsze zmiany.

Komponenty

Folder components będzie w sobie zawierał foldery wszystkich komponentów, które stworzę. Na dodatek dodałem plik index.js w którym będę exportował w prosty sposób wszystkie komponenty. Działanie można zobaczyć na komponencie HelloWorld. Skoro już przy tym jesteśmy, niezbędne okazało się stworzenie pliku vue.config.js w którym to deklarujemy alias do łatwiejszego importowania komponentów. Niestety eslint domyślnie nie widzi aliasów więc musimy mu pomóc. Ja skorzystałem z eslint-import-resolver-alias. Konfiguracja jest podana pod linkiem lub można zobaczyć ją w repozytorium, które udostępniam.

Pozostałe zmiany

Dalej już są proste zmiany. Wydzielenie osobnych folderów dla routera oraz vuexa. W tamtych folderach więcej zmian wprowadzimy później. Tak samo z folderem views, który póki co pozostał niezmieniony ale gdy zaczniemy pracę to wydzielimy sobie poszczególne moduły takie jak logowanie czy dashboard do osobnych folderów.

Tak wygląda wygenerowany projekt

Generowanie projektu jest bardzo szybkie jednak do komfortowej pracy z Vue lepiej jest wprowadzić kilka zmian. Oczywiście są to zmiany bez których ja sobie nie wyobrażam pracy. Niekoniecznie Tobie będą one pasowały ale sugeruję sprawdzić na jakimś małym projekcie. Może akurat uznasz, że jest to całkiem logiczny podział i zostaniesz przy nim na dłużej.

ESLint w Visual Studio Code

Po zainstalowaniu rozszerzenia ESLint w VSC miałem problem z tym, że nie pojawiały mi się informacje o błędach w plikach. Nie wiedziałem dlaczego. Jeżeli też miałeś z tym problem to prawdopodobnie brakuje Ci odpowiednich ustawień w Twoim VSC. Aby to zmienić musisz wejść w Preferences -> Settings. Jeżeli korzystasz z systemu MacOS to powinno to wyglądać mniej więcej tak.

menu settings
MacOS menu Settings

Później w zakładce users po lewej stronie odnajdź Extensions. W środku będzie lista wszystkich rozszerzeń, które obecnie masz zainstalowane. Na tej liście odnajdź ESLint i kliknij w niego.

Ustawienia ESLinta

Powinieneś zobaczyć taki ekran. Kliknij w Edit in settings.json i na końcu pliku, który Ci się pokaże dopisz taki kod:

     
   "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": false
        }
    ]
 

Możesz też ustawić autoFix na true aczkolwiek ja preferuję osobiście poprawiać błędy ponieważ łatwiej wtedy zapamiętuję i po prostu staram się nie popełniać ich w przyszłości.

Generowanie projektu mamy za sobą!

Wow. Wyszedł z tego całkiem długi wpis. Mam nadzieję, że znajdziesz tutaj coś co Ci pomoże w codziennej pracy z Vue lub przynajmniej usprawni tą pracę.

Co dalej?

W przyszłym tygodniu zajmę się backendem. Cały kod z dzisiejszego wpisu znajdziesz w TYM miejscu. Tak jak pisałem, będą tam trafiać wszystkie zmiany z każdego postu. Staram się nie komentować kodu ale chciałbym żeby nazwy commitów były jakoś powiązane z nazwami wpisów. Ten kod będzie od razu na branchu „master” ale kolejne zmiany będą miały zawsze swoje własne branche po to aby łatwo można było się dostać do interesującego nas fragmentu.

Błędy, pytania i propozycje.

Jeżeli widzisz błędy w moim poście lub w kodzie, śmiało nie wahaj się zwrócić mi na nie uwagi. Możesz napisać mi maila lub skomentować ten post. W razie niejasności jestem gotowy odpowiedzieć na wszystkie pytania także zachęcam do ich zadawania. Rozpatrzę też wszystkie propozycje i pomysły. Słowem zapraszam do dyskusji na temat tego co tutaj zamieściłem!

Zapraszam do śledzenia bloga!

Jak zwykle zachęcam do zapisania się na newsletter, gdzie informuję kiedy wyjdzie nowy post lub co się obecnie dzieje na blogu. Nie wysyłam Ci żadnego spamu bo sam go nie znoszę.

Seria: „Własna aplikacja”

Ten post jest częścią serii o nazwie „Własna aplikacja”. Resztę postów z tej serii możesz znaleźć tutaj:

Autor

Napisz komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.