Samouczek: Vue.js dla początkujących

Jeśli dopiero zaczynasz korzystać z Vue.js, ten przewodnik pomoże Ci zacząć od podstaw.

• Vue.js Piaskownica kodu HelloWorld
• Spróbuj użyć Node.js w programie Visual Studio Code

Wymagania wstępne

• Najpierw należy zainstalować Vue.js w systemie Windows lub podsystemie Windows dla systemu Linux.

Wypróbuj środowisko NodeJS z programem Visual Studio Code

Jeśli jeszcze go nie masz, zainstaluj program VS Code. Zalecamy zainstalowanie programu VS Code w systemie Windows niezależnie od tego, czy planujesz używać programu Vue w systemie Windows, czy WSL.

1. Otwórz wiersz polecenia i utwórz nowy katalog: mkdir HelloVue, a następnie wprowadź katalog: cd HelloVue

2. Zainstaluj Vue CLI: npm install -g @vue/cli

3. Utwórz aplikację Vue: vue create hello-vue-app

   Musisz wybrać, czy używać programu Vue 2, czy Vue 3 (wersja zapoznawcza), czy ręcznie wybrać odpowiednie funkcje.

   

4. Otwórz katalog nowej aplikacji hello-vue-app: cd hello-vue-app

5. Spróbuj uruchomić nową aplikację Vue w przeglądarce internetowej: npm run serve

   Powinno się wyświetlić komunikat "Witamy w aplikacji Vue.js" na http://localhost:8080 w przeglądarce. Możesz nacisnąć Ctrl+C , aby zatrzymać serwer vue-cli-service.

   Uwaga / Notatka

   W przypadku korzystania z programu WSL (z systemem Ubuntu lub ulubionej dystrybucji systemu Linux) na potrzeby tego samouczka, należy upewnić się, że masz zainstalowane rozszerzenie Remote - WSL Extension, aby uzyskać najlepsze doświadczenie w uruchamianiu i edytowaniu kodu za pomocą zdalnego serwera Visual Studio.

6. Spróbuj zaktualizować komunikat powitalny, otwierając kod źródłowy aplikacji Vue w programie VS Code, wprowadź: code .

7. Program VS Code uruchomi i wyświetli aplikację Vue w Eksploratorze plików. Uruchom ponownie aplikację w terminalu npm run serve i otwórz przeglądarkę internetową na hoście lokalnym, aby zobaczyć wyświetloną stronę powitalną strony Vue. App.vue Znajdź plik w programie VS Code. Spróbuj zmienić pozycję "Witamy w twojej aplikacji Vue.js" na "Witamy w dżungli!". Zobaczysz, jak aplikacja Vue zostanie przeładowana, gdy tylko zapiszesz zmianę.

   

Dodatkowe zasoby

• Korzystanie z Vue w Visual Studio Code: Dowiedz się więcej na temat korzystania z Vue z edytorem VS Code, w tym rozszerzenia Vetur, które zapewnia wyróżnianie składni Vue, funkcję IntelliSense, obsługę debugowania i nie tylko.

• Vue.js dokumentacji

• Porównanie oprogramowania Vue z innymi platformami, takimi jak React lub Angular

• Vue.js omówienie

• Pierwsze kroki należy wykonać przy użyciu ścieżki szkoleniowej Vue.js