Vue Academy · Lekcja

Instalacja Vue CLI

Zainstalują i wykorzystają Państwo Vue CLI do tworzenia nowych projektów.

Instalacja Vue CLI to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Czym jest Vue CLI?

Vue CLI to klasyczne narzędzie wiersza poleceń do tworzenia szkieletu i zarządzania projektami Vue.

Tworzy projekty z rozsądnymi ustawieniami domyślnymi
Zarządza konfiguracją kompilacji za pomocą wtyczek
Jest oparte na webpack

Przez lata było standardem, choć współczesne Vue preferuje Vite.

Instalowanie Vue CLI globalnie

Zainstaluj CLI globalnie, aby polecenie vue było dostępne wszędzie.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Tworzenie projektu

Użyj polecenia vue create, aby utworzyć szkielet nowego projektu. Podajesz mu nazwę projektu.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Wybór presetów

CLI poprosi o wybranie presetu:

Domyślne zapewnia Babel i ESLint — to najszybsza ścieżka
Ręcznie wybierz funkcje pozwala dodać Router, Vuex, TypeScript, testy i inne elementy

Presety można zapisywać i ponownie wykorzystywać w przyszłych projektach.

Ręczny wybór funkcji

Po wybraniu ręcznego wyboru zaznaczają Państwo potrzebne funkcje.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Uruchamianie projektu

Po utworzeniu projektu CLI wyświetli polecenia potrzebne do uruchomienia aplikacji.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Poznaj Vite

Vite to nowoczesne narzędzie do kompilacji stworzone przez zespół Vue.

Wykorzystuje natywne moduły ES, aby uruchamiać się natychmiast
Zapewnia błyskawiczną funkcję Hot Module Replacement
Jest znacznie szybsze niż oparte na webpack Vue CLI

Vite jest obecnie zalecanym narzędziem do nowych projektów Vue.

Vite a Vue CLI

Porównanie obu narzędzi:

Vue CLI wykorzystuje webpack, uruchamia się wolniej na zimnym starcie, ale jest dojrzałe i konfigurowalne
Vite wykorzystuje esbuild i natywne ESM, uruchamia się niemal natychmiast i jest domyślnym rozwiązaniem na przyszłość

Vue CLI jest obecnie w trybie konserwacji. Preferuj Vite, chyba że utrzymujesz starszy projekt.

npm create vue@latest

Oficjalnym sposobem rozpoczęcia nowego projektu Vue obsługiwanego przez Vite jest narzędzie create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Uruchamianie projektu create-vue

create-vue korzysta ze standardowych skryptów Vite.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Którego narzędzia użyć?

Wskazówki dotyczące wyboru:

Rozpoczynają Państwo nowy projekt w 2024 roku lub później? Należy użyć npm create vue@latest (Vite)
Utrzymują Państwo starszy projekt utworzony za pomocą Vue CLI? Należy nadal go używać
Zależy Państwu na najszybszym środowisku programistycznym? Wygrywa Vite

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat wyboru narzędzi Vue.

Podsumowanie: instalacja Vue CLI

Poznali Państwo narzędzia do tworzenia szkieletu aplikacji Vue:

Vue CLI instaluje się za pomocą npm install -g @vue/cli
vue create tworzy szkielet projektu na podstawie presetów
Vite to nowoczesna, szybka alternatywa
npm create vue@latest to zalecany nowoczesny sposób rozpoczęcia pracy

Następnie: poznają Państwo strukturę wygenerowanego projektu.

Często zadawane pytania

Czy lekcja „Instalacja Vue CLI” jest bezpłatna?

Tak — pełny tekst „Instalacja Vue CLI” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Instalacja Vue CLI”?

Zainstalują i wykorzystają Państwo Vue CLI do tworzenia nowych projektów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Instalacja Vue CLI”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy