Jak tworzyć komponenty w Vue CLI
Wymagania wstępne
Zanim zacznij od tego, istnieją pewne warunki, które musisz mieć:
- Podstawowa znajomość HTML, CSS i JavaScript.
- Węzeł.JS zainstalowane w systemie operacyjnym.
Sprawdź instalację Vue CLI
Przede wszystkim upewnij się, że masz najnowszy Vue CLI zainstalowany w systemie. Możesz zweryfikować albo vue cli jest instalowany lub nie w naszym systemie, wpisując polecenie podane poniżej:
$ vue --version
Jeśli zostanie zainstalowany, będziesz mieć najnowszą wersję Vue CLI wydrukowaną w terminalu. W przeciwnym razie, jeśli nie jest zainstalowany, możesz użyć menedżera pakietu NPM lub menedżera pakietów przędzy, aby zainstalować Vue CLI. Aby zainstalować go za pomocą menedżera pakietów NPM, musisz wpisać polecenie podane poniżej w terminalu:
$ npm install -g @vue/cli
W powyższym poleceniu, -G Flaga służy do instalowania Vue CLI na całym świecie w twoim systemie.
Po całkowitym zainstalowaniu Vue CLI możesz go zweryfikować, wpisując polecenie podane poniżej:
$ vue --version
Będziesz miał najnowszą wersję Vue CLI w wyjściu.
Tworzenie projektu
Załóżmy teraz, że sam założycie cały projekt Vue. W takim przypadku nie jest dobrym wyborem na nowo odkrycie koła; Projekt vue można utworzyć za pomocą Vue polecenie w terminalu, ponieważ Vue CLI zapewnia już wygenerowane szablony na początek od projektu Vue.
Aby utworzyć aplikację vue, po prostu wpisz polecenie podane poniżej w terminalu:
$ vue Utwórz nazwę projektu
Pamiętaj, aby wymienić Nazwa Projektu z żądaną nazwą projektu i trafienie Wchodzić.
Po kilku sekundach skłoniłby do wybrania domyślnego ustawienia lub ręcznego wyboru niektórych funkcji.
Jeśli chcesz mieć niestandardowe funkcje, wybierz „Ręcznie wybierz funkcje” Naciśnij ENTER, a otrzymasz błyskawiczne opcje, takie jak wybór wersji vue, dodanie vuex lub router. Wybierz żądaną opcję i naciśnij Wchodzić.
Odpowiedz na kilka niezbędnych pytań konfiguracyjnych i zapisz ustawione na przyszłe projekty.
Projekt Vue zostanie utworzony za czasem za pomocą Vue CLI i możesz rozpocząć rozwój w Vue.JS.
Rozpoczęcie aplikacji Vue
Po utworzeniu projektu Vue możesz rozpocząć projekt, najpierw nawigając w katalogu projektu za pomocą polecenia CD w terminalu:
$ CD Project-name
W katalogu projektu rozpocznij aplikację Vue, wpisując polecenie podane poniżej w terminalu:
$ NPM Run Serve
Po zapłonie aplikacji Vue odwiedź http: // localhost: 8080 w pasku adresu ulubionej przeglądarki:
Będziesz mieć ekran powitalny vue.Projekt JS.
Tworzenie komponentu w Vue
Aby stworzyć komponent w projekcie Vue, utwórz .Vue plik w składniki folder i podaj mu nazwę wyboru.
Teraz w tym nowo stworzonym .Vue Plik, możesz napisać odpowiednio HTML, JavaScript i CSS.
Otwórz .Vue Złóż i napisz kod, który chcesz napisać. Na przykład:
Nowy komponent
To jest tekst w nowicjuszy.
Po zakończeniu części HTML podaj temu komponentowi nazwę w znaczniku, jak pokazano w fragmencie kodu poniżej:
Po pomyślnym utworzeniu komponentu zobaczmy, jak go zaimportować i użyć go na innej stronie lub komponencie.
Import komponentu w Vue
Składnia importu do importowania komponentu w dowolnym innym elemencie Vue jest dość prosta i łatwa; Musisz tylko zaimportować komponent wewnątrz znacznika skryptu za pomocą składni ES6, jak pokazano w fragmencie kodu poniżej:
Po pomyślnym zaimportowaniu komponentu wystarczy utworzyć obiekt o nazwie składniki i podaj nazwę w składniki obiekt, jak pokazano poniżej:
Teraz możesz użyć go w dowolnym miejscu w znaczniku komponentu. Na przykład, jeśli chcemy go zaimportować do App.Vue, Składnia byłaby taka:
Po zakończeniu całej tej konfiguracji zapisz każdy plik, który zmieniłeś i wróć do przeglądarki
Możesz być świadkiem w załączonym zrzucie ekranu, że komponent jest importowany pomyślnie i doskonale na stronie internetowej.
Wniosek
Tworzenie, importowanie i używanie komponentu w dowolnym innym elemencie Vue.JS jest tak proste, jak to mówienie. W tym poście przechodzimy przez cały proces tworzenia, dodawania i wykorzystania komponentu w Vue.JS.