Vite - Silnik Napędowy Projektu

W NOVA LAB używamy najnowocześniejszych narzędzi. Vite to nasz "silnik napędowy" - kompiluje kod szybciej niż rakieta osiąga pierwszą prędkość kosmiczną!

Po co w ogóle silnik? Przeglądarka nie rozumie plików .vue ani TypeScriptu, a aplikacja misji to setki modułów, które importują się nawzajem. Starsze narzędzia, tak zwane bundlery, przed pokazaniem czegokolwiek sklejały całą aplikację w jedną paczkę, więc im większy projekt, tym dłużej czekałeś na start serwera i na każdą poprawkę.

Czym jest Vite?

Vite (francuskie słowo oznaczające "szybki", wymawiane "wit") to narzędzie budujące nowej generacji. Stworzył go Evan You - ten sam twórca co Vue.js. Vite łączy dwie role: serwer deweloperski, na którym testujesz aplikację, oraz budowanie wersji produkcyjnej.

Dlaczego Vite jest tak szybki?

1. Native ES Modules - w trybie deweloperskim serwuje Twój kod przeglądarce jako moduły ES, na żądanie, bez bundlowania całej aplikacji; zależności z node_modules wstępnie paczkuje raz, przy pierwszym starcie
2. Hot Module Replacement - po zapisaniu pliku podmienia tylko zmieniony moduł, bez przeładowania strony, niezależnie od rozmiaru projektu
3. Natywne narzędzia - do wersji 7 Vite korzystał z esbuild (według ówczesnej dokumentacji wstępnie paczkował zależności 10-100 razy szybciej niż bundlery pisane w JavaScripcie) oraz z Rollupa przy buildzie produkcyjnym; od Vite 8 obie role przejął Rolldown, bundler napisany w Rust, a kod przetwarza Oxc

Paliwo: Node.js

Silnik potrzebuje paliwa, a jest nim Node.js. Zanim uruchomisz kreator projektu, sprawdź w terminalu, jaką wersję masz zainstalowaną:

1node --version

Dokumentacja Vue wymaga obecnie Node.js w wersji 22.18 lub nowszej z linii 22 albo 24.12 lub nowszej. Na starszej wersji narzędzia mogą zgłaszać ostrzeżenia albo w ogóle się nie uruchomić, więc ten krok wykonuj zawsze jako pierwszy.

Inicjalizacja Projektu Misji

Aby uruchomić nowy projekt systemu, użyj protokołu startowego. To polecenie pobiera i uruchamia create-vue, oficjalny kreator projektów Vue, a dopisek @latest gwarantuje jego najnowszą wersję:

1npm create vue@latest

Kreator zada pytania o konfigurację misji. Funkcje zaznaczasz na liście spacją i zatwierdzasz Enterem:

1◇  Project name (target directory):
2│  mars-control-system
3│
4◇  Use TypeScript?
5│  Yes
6│
7◇  Select features to include in your project:
8│  Router (SPA development), Pinia (state management), Vitest (unit testing), Linter (error prevention), Prettier (code formatting)
9│
10◇  Select experimental features to include in your project:
11│  none
12│
13◇  Skip all example code and start with a blank Vue project?
14│  No

JSX pomijamy, bo w Vue piszemy szablony, a funkcji eksperymentalnych nie włączamy na produkcyjnej misji. Starsze wersje kreatora zadawały te same pytania pojedynczo, na przykład "Add TypeScript? … Yes" albo "Add Pinia? … Yes" - zmieniła się forma, wybory zostały te same.

Struktura Systemu Misji

Po zakończeniu pracy kreator zostawia katalog o takiej strukturze:

1mars-control-system/
2├── public/           # Zasoby statyczne (ikony, manifesty)
3├── src/
4│   ├── assets/       # Grafiki, style CSS
5│   ├── components/   # Moduły interfejsu
6│   ├── views/        # Ekrany główne
7│   ├── router/       # Konfiguracja nawigacji
8│   ├── stores/       # Bazy danych Pinia
9│   ├── App.vue       # Główny komponent
10│   └── main.ts       # Punkt startowy systemu
11├── index.html        # Szablon HTML
12├── package.json      # Manifest zależności
13├── vite.config.ts    # Konfiguracja silnika Vite
14└── tsconfig.json     # Konfiguracja TypeScript

Zwróć uwagę, że index.html leży w katalogu głównym, a nie w public/ - dla Vite to punkt wejścia aplikacji. Katalogi router/ i stores/ pojawiają się tylko wtedy, gdy wybierzesz Router i Pinię. Hierarchia komponentów zaczyna się od App.vue: niżej stoją komponenty układu, na przykład nagłówek i pasek boczny, które otaczają widoki z views/, a widoki składają się z najmniejszych modułów z components/, takich jak przyciski i karty.

Konfiguracja Silnika

Plik vite.config.ts (albo vite.config.js bez TypeScriptu) mówi Vite, jak ma pracować. Funkcja defineConfig daje edytorowi podpowiedzi, plugin vue() z pakietu @vitejs/plugin-vue uczy Vite rozumieć pliki .vue, a alias @ jest skrótem do katalogu src:

1import { fileURLToPath, URL } from 'node:url'
2
3import { defineConfig } from 'vite'
4import vue from '@vitejs/plugin-vue'
5
6export default defineConfig({
7  plugins: [vue()],
8  resolve: {
9    alias: {
10      '@': fileURLToPath(new URL('./src', import.meta.url))
11    }
12  }
13})

Funkcje fileURLToPath i URL z wbudowanego modułu node:url zamieniają zapis ./src na pełną ścieżkę na dysku. Kreator dopisuje tu jeszcze plugin vueDevTools(), do którego wrócimy przy narzędziach diagnostycznych. Kod komponentów się nie zmienia - konfiguracja dotyczy wyłącznie narzędzia - ale import z głęboko położonego pliku robi się krótki:

1// zamiast '../../components/ModuleCard.vue'
2import ModuleCard from '@/components/ModuleCard.vue'

Alias działa tak samo z każdego miejsca projektu, więc po przeniesieniu pliku do innego katalogu nie poprawiasz w nim ścieżek.

Uruchomienie Systemu

Zostały trzy komendy: wejście do katalogu projektu, instalacja zależności i start serwera deweloperskiego:

1cd mars-control-system
2npm install           # Załaduj moduły
3npm run dev           # Uruchom w trybie deweloperskim

System uruchomi się na http://localhost:5173 - nasz lokalny symulator. Zmień napis w dowolnym komponencie i zapisz plik, a HMR podmieni moduł bez przeładowania strony. Polecam Ci trzymać serwer włączony w osobnym oknie terminala przez całą sesję pracy. W następnej lekcji zajrzymy do środka plików .vue, które plugin Vue kompiluje dla przeglądarki.

W edytorze poniżej wpisz komunikat w polu tekstowym albo zmień dowolny napis w kodzie i obserwuj, jak podgląd odświeża się bez przeładowania.

Zapamiętaj: npm create vue@latest buduje rakietę, npm install tankuje moduły, a npm run dev odpala silnik Vite na porcie 5173.

1<template>
2  <div class="nova-lab">
3    <h1>Vite + Vue.js - Błyskawiczna Konfiguracja</h1>
4
5    <section class="info-panel">
6      <h2>Dlaczego Vite?</h2>
7      <div class="feature-grid">
8        <div class="feature" v-for="feature in viteFeatures" :key="feature.title">
9          <span class="icon">{{ feature.icon }}</span>
10          <h3>{{ feature.title }}</h3>
11          <p>{{ feature.description }}</p>
12        </div>
13      </div>
14    </section>
15
16    <section class="demo-panel">
17      <h2>Hot Module Replacement w akcji</h2>
18      <p>Edytuj kod i zobacz zmiany natychmiast!</p>
19      <div class="hmr-demo">
20        <input v-model="message" placeholder="Wpisz wiadomość..." />
21        <p class="preview">{{ message || 'Twoja wiadomość pojawi się tutaj...' }}</p>
22      </div>
23    </section>
24  </div>
25</template>
26
27<script setup>
28import { ref } from 'vue'
29
30const message = ref('')
31
32const viteFeatures = [
33  {
34    icon: '',
35    title: 'Błyskawiczny start',
36    description: 'Serwer startuje w milisekundach dzięki natywnym ES modules'
37  },
38  {
39    icon: '',
40    title: 'Hot Module Replacement',
41    description: 'Zmiany widoczne natychmiast bez przeładowania strony'
42  },
43  {
44    icon: '',
45    title: 'Optymalizowany build',
46    description: 'Rolldown pod spodem (od Vite 8) dla produkcyjnych bundli'
47  },
48  {
49    icon: '',
50    title: 'TypeScript',
51    description: 'Wsparcie TypeScript out-of-the-box'
52  }
53]
54</script>
55
56<style>
57.nova-lab {
58  min-height: 100vh;
59  background: #0a0e27;
60  color: #e0e0e0;
61  padding: 2rem;
62  font-family: system-ui, sans-serif;
63}
64
65h1 {
66  color: #00ff88;
67  text-align: center;
68  margin-bottom: 2rem;
69}
70
71section {
72  background: rgba(26, 30, 55, 0.8);
73  border: 1px solid #00b4d8;
74  border-radius: 12px;
75  padding: 1.5rem;
76  margin-bottom: 1.5rem;
77  max-width: 900px;
78  margin-left: auto;
79  margin-right: auto;
80}
81
82h2 {
83  color: #00b4d8;
84  margin-top: 0;
85}
86
87.feature-grid {
88  display: grid;
89  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
90  gap: 1rem;
91}
92
93.feature {
94  background: rgba(0, 180, 216, 0.1);
95  padding: 1rem;
96  border-radius: 8px;
97  text-align: center;
98}
99
100.feature .icon {
101  font-size: 2rem;
102}
103
104.feature h3 {
105  color: #00ff88;
106  margin: 0.5rem 0;
107}
108
109.feature p {
110  font-size: 0.9rem;
111  color: #aaa;
112  margin: 0;
113}
114
115.hmr-demo {
116  margin-top: 1rem;
117}
118
119.hmr-demo input {
120  width: 100%;
121  padding: 1rem;
122  background: #1a1e37;
123  border: 2px solid #00b4d8;
124  border-radius: 8px;
125  color: #fff;
126  font-size: 1rem;
127}
128
129.hmr-demo input:focus {
130  outline: none;
131  border-color: #00ff88;
132}
133
134.preview {
135  margin-top: 1rem;
136  padding: 1rem;
137  background: rgba(0, 255, 136, 0.1);
138  border-radius: 8px;
139  color: #00ff88;
140  font-style: italic;
141}
142</style>