Ten artykuł będzie wprowadzeniem jak stworzyć projekt oparty na TypeScript używając Vue.js i Vuex. Zaczniemy od tworzenia aplikacji używając VueCLI.
Plan naszej aplikacji Vue / Vue router / Vuex
Napiszemy prostą aplikację CRUD, która będzie prosta:
-
Pobieranie listy postów (ładowanie do store)
-
Tworzenie postu
-
Edycja postu
-
Usuwanie postu
Stwórz szkielet aplikacji Vue
Najpierw musisz zainstalować VueCLI. Możesz to zrobić używając NPM:
npm install -g @vue/cli
Lub używając Yarn:
yarn global add @vue/cli
Tworzenie aplikacji Vue używając VueCLI
Następnie tworzysz projekt używając VueCLI. Aby uruchomić tę komendę w linii poleceń:
vue create <nameOfApp>
W moim przypadku to będzie ts-vue więc uruchamiam
vue create ts-vue
Zacznij definiować swoją aplikację używając "Manually select features":
Z menu musisz wybrać opcje widoczne na ekranie:
-
Babel
-
TypeScript
-
Router
-
Vuex
-
CSS Pre-processors (będzie wybrane w następnych krokach)
-
Linter / Formatter (preset będzie wybrany w następnych krokach)
-
Unit Testing (silnik będzie wybrany w następnych krokach)
-
E2E Testing (silnik będzie wybrany w następnych krokach)
Następnie zostaniesz zapytany o komponenty class-style (pliki .vue podzielone na sekcje template, script, style).
Następnie wybierz swój ulubiony preprocesor. Użyłem Stylus (dlaczego? Opisałem to w moim artykule)
Następnie zostaniesz zapytany o opcje linterów. Użyj obu (Lint on save i Lint and fix on commit)
Ta opcja doda ten kod do pliku package.json
"gitHooks": {
"pre-commit": "lint-staged"
},
To dodaje opcję, która będzie uruchamiana przed każdym commitem GIT. Przed każdym commitem będzie uruchamiana operacja lintowania.
Wybierz silnik testowy zarówno dla Unit testing jak i E2E testing:
Następnie zobaczysz proces instalacji:
VueCLI po utworzeniu aplikacji
Struktura projektu Vue
Projekt Vue zaraz po inicjalizacji z VueCLI w VisualStudio Code. Jak widać projekt jest podzielony na:
-
src (źródło twojej aplikacji)
-
assets
-
components (tutaj będziesz przechowywać komponenty aplikacji)
-
views (tutaj będziesz przechowywać strony aplikacji)
-
-
tests (testy twojej aplikacji)
-
public (folder publiczny, do którego aplikacja będzie kompilowana)
Gdy przeanalizujesz strukturę folderu src i spojrzysz na wzorzec Atomic Design, możesz powiedzieć, że w components będą przechowywane wszystkie atomy / molekuły / organizmy, a w views strony. Wygląda to jak uproszczone podejście do Atomic Design.
Dodawanie PUG do projektu Vue.js dla uproszczenia szablonów
Lubię minimalizm kodu dlatego lubię PUG (wcześniej znany jako JADE). PUG to preprocesor HTML. Aby włączyć go w plikach .VUE, musimy postępować zgodnie z instrukcjami dodanymi na oficjalnej stronie Vue.js: https://vue-loader.vuejs.org/guide/pre-processors.html#pug
npm install -D pug pug-plain-loader
Możesz teraz używać PUG w swoich szablonach tak:
Uruchamianie projektu
Teraz uruchommy projekt!
npm run serve
I voila: Teraz musimy uruchomić przeglądarkę z URL http://localhost:8080
(oczywiście jeśli nie uruchomiliśmy żadnej innej aplikacji na tym porcie. Jeśli tak - CLI weźmie następny wolny port np. 8081, 8082 itd.)
