Metody uruchamiania aplikacji Vue.js

1. Osadzenie Vue przez CDN

Najprostszy sposób na użycie Vue to dodanie go do strony HTML poprzez CDN (sieć dostarczania treści). Wymagania: potrzebna jest tylko przeglądarka i dostęp do Internetu (w przypadku zewnętrznego CDN). Nie jest potrzebny Node.js ani instalacja dodatkowych narzędzi.

Instalacja narzędzi: W praktyce niczego nie instalujemy – wystarczy umieścić w kodzie HTML tag <script> wskazujący na CDN Vue. Na przykład:

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Można użyć różnych dostawców CDN (unpkg, jsDelivr, cdnjs itp.).

Tworzenie i uruchomienie projektu: Przygotowujemy zwykły plik HTML. W sekcji <head> lub na końcu <body> dodajemy powyższy <script>, a następnie w osobnym skrypcie inicjujemy aplikację Vue. Przykładowy minimalny kod:

 <!DOCTYPE html>
 <html>
 <head>
  <!-- Osadzenie Vue przez CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 </head>
 <body>
  <div id="app">{{ message }}</div>

  <script>
    // Tworzymy nową aplikację Vue i montujemy ją na elemencie #app
    const { createApp } = Vue;
    createApp({
      data() {
        return { message: 'Witaj Vue!' }
      }
    }).mount('#app');
  </script>
 </body>
 </html>

Po otwarciu tego pliku w przeglądarce zobaczymy działający prosty przykład („Witaj Vue!”). W tej metodzie nie ma lokalnego serwera developerskiego – wystarczy otworzyć plik statyczny (lub użyć np. dowolnego prostego serwera plików). Struktura katalogów: zwykle to tylko jeden plik index.html, ewentualnie dodatkowe pliki CSS/JS, jeśli chcemy rozdzielić kod. Przykład:

  • index.html – główny plik (z kodem Vue i HTML).
  • (opcjonalnie) app.js – osobny plik JavaScript z logiką Vue, jeśli nie chcemy pisać wszystkiego inline.

Ten sposób jest najprostszy, ale ma ograniczenia: nie pozwala korzystać z zaawansowanych składników jednoplikowych (.vue) ani wbudowanych systemów modułów. Jest jednak idealny do prototypowania lub małych wzbogaceń statycznych stron.

2. Użycie Vue CLI

Vue CLI (Command Line Interface) to narzędzie oficjalnie wspierane dla Vue 2 i 3, które automatycznie tworzy strukturę projektu z użyciem bundlera (Webpack). Uwaga: od czasu wprowadzenia Vite, Vue CLI jest w trybie konserwacji, ale nadal używane w wielu kursach i starszych projektach.

Wymagania wstępne: Należy mieć zainstalowany Node.js (wersja co najmniej 8.9, zalecana 10 lub wyższa)cli.vuejs.org. Zaleca się Node LTS lub nowszy. Po instalacji Node.js mamy również npm.

Instalacja narzędzi: Instalujemy globalnie pakiet Vue CLI przez npm lub Yarn:

 npm install -g @vue/cli  
 # lub, jeśli używasz Yarn:
 yarn global add @vue/cli

Polecenie to dodaje wiersz poleceń vue. Po instalacji można sprawdzić wersję poleceniem vue --version.

Utworzenie projektu: W katalogu, gdzie chcemy pracować, wywołujemy:

 vue create moj-projekt

Narzędzie zapyta o kilka opcji (można wybrać preset domyślny z Babel i ESLint lub wybrać ręcznie dodatkowe funkcje, np. TypeScript, Router itp.). Wyboru można dokonać strzałkami/enterem w konsoli. Po potwierdzeniu rozpocznie się generowanie projektu.

Uruchomienie lokalnego serwera developerskiego:
Po utworzeniu projektu przechodzimy do jego katalogu i instalujemy zależności:

cd moj-projekt
npm install

Następnie uruchamiamy serwer developerski:

 npm run serve

Serwer zwykle wystartuje na lokalnym adresie (np. http://localhost:8080). W terminalu CLI wyświetli się komunikat z adresem. Serwer obsługuje hot-reload – zmiany w kodzie (np. w plikach .vue) będą automatycznie odzwierciedlane w przeglądarce.

Struktura katalogów projektu (Vue CLI):
Po wygenerowaniu projektu otrzymujemy typową strukturę:

moj-projekt/
├─ node_modules/       – zależności projektu
├─ public/
│   └─ index.html      – główny plik HTML szablonu
├─ src/
│   ├─ assets/         – zasoby (obrazy, czcionki itp.)
│   ├─ components/     – gotowe komponenty Vue (np. HelloWorld.vue)
│   ├─ App.vue         – główny komponent aplikacji
│   └─ main.js         – punkt wejścia (inicjalizacja Vue)
├─ .gitignore
├─ babel.config.js
├─ package.json       – metadane i skrypty (m.in. `serve`, `build`)
└─ README.md
  • W public/index.html znajduje się pojedynczy <div id="app">, do którego montuje się aplikacja.
  • Plik src/main.js zawiera coś w rodzaju: 
 import { createApp } from 'vue'     import App from './App.vue' createApp(App).mount('#app')

  • Natomiast App.vue jest komponentem głównym (zawiera <template>, <script>, <style>). Inne komponenty umieszczamy w src/components.

Vue CLI domyślnie używa Webpack do budowania projektu. Polecenie npm run serve odpala lokalny serwer dev, a npm run build buduje projekt do folderu dist (produkcja). Przy korzystaniu z CLI mamy pełną elastyczność: możemy modyfikować konfigurację Webpack (przez plik vue.config.js), dodawać pluginy, używać TypeScript, Router, Vuex itd.

3. Użycie Vite (create-vue)

Vite to nowoczesny bundler/narzędzie build-step rekomendowane obecnie przez zespół Vue (szczególnie dla Vue 3). Zapewnia dużo szybszy start i hot-reload dzięki wykorzystaniu natywnych modułów ES i szybkich kompilacji.

Wymagania wstępne: Podobnie jak przy CLI, potrzebujemy Node.js. Dokumentacja wskazuje na Node.js w wersji co najmniej 18.3 (lub nowszej) dla pełnej zgodności.

Instalacja narzędzi: Nie instalujemy nic globalnie (chyba że npm/yarn). W terminalu uruchamiamy komendę inicjalizującą nowy projekt:

 npm create vue@latest

Alternatywnie (jeśli używasz innych narzędzi):

 pnpm create vue@latest
 yarn create vue

Polecenie to pobierze i uruchomi oficjalny skrypt create-vue, który zapyta o kilka opcji (np. nazwa projektu, TypeScript, router, Pinia, testy itp.). Przykładowy zestaw pytań:

 ✔ Project name: … moj-vue-vite
 ✔ Add TypeScript? … No
 ✔ Add Vue Router for SPA? … Yes
 ✔ Add Pinia for state management? … No
 ✔ Add ESLint? … Yes

Po potwierdzeniu Vue automatycznie wygeneruje projekt. Czekamy na komunikat „Scaffolding project in ./<nazwa>… Done”.

Uruchomienie lokalnego serwera developerskiego:
Po skończeniu tworzenia projektu przechodzimy do katalogu i instalujemy zależności:

 cd moj-vue-vite npm install

Następnie uruchamiamy serwer deweloperski poleceniem:

 npm run dev

Zwykle pojawia się adres lokalny (np. http://localhost:5173). Vite oferuje bardzo szybkie odświeżanie zmian.

Struktura katalogów projektu (Vite + Vue):
Typowa struktura wygenerowana przez create-vue jest podobna do Vue CLI, ale trochę uproszczona:

moj-vue-vite/
├─ node_modules/
├─ public/
│   └─ vite.svg          – plik graficzny startowy (można usuwać)
├─ src/
│   ├─ assets/
│   ├─ components/
│   │   └─ HelloWorld.vue
│   ├─ App.vue
│   └─ main.js
├─ .gitignore
├─ index.html          – główny plik HTML (punkt startu aplikacji)
├─ package.json
└─ vite.config.js      – konfiguracja Vite (domyślnie niewiele potrzeba zmieniać)

Zawartość jest analogiczna: main.js importuje App.vue i montuje aplikację, a App.vue może wykorzystywać składnię <script setup> (Composition API). Na przykład main.js może wyglądać tak:

 import { createApp } from 'vue'
 import App from './App.vue'

 createApp(App).mount('#app')

A App.vue może być np.:

 <template>
  <div>
    <h2>{{ message }}</h2>
    <input v-model="message" placeholder="Zmień wiadomość"/>
  </div>
 </template>

 <script setup>
     import { ref } from 'vue'
     const message = ref('Witaj Vite!')
 </script>

 <style>
     h2 { color: green; }
 </style>