Kurs Vue 3: tworzenie aplikacji z create-vue i Vite

Aplikacja Vue to instancja utworzona przez createApp i podpięta do elementu strony. Ten rozdział zakłada projekt, a potem wyświetla pierwszą daną na ekranie.

Utworzenie projektu

Vue ma oficjalny generator, create-vue, który stawia projekt Vite skonfigurowany pod Vue. Otwórz terminal w katalogu, w którym trzymasz swoje projekty:

npm create vue@latest

Generator zadaje serię pytań. Na potrzeby tego poradnika odpowiedz:

• Project name: boutique-vue
• TypeScript: Nie, zostajemy przy JavaScripcie, żeby nie mieszać dwóch rzeczy do nauki naraz.
• JSX, Vue Router, Pinia, ESLint, Prettier: Nie. Dodamy je, kiedy będą potrzebne.
• Vitest: Tak, jeśli chcesz pisać testy, w przeciwnym razie Nie.

Zainstaluj zależności, a potem uruchom serwer deweloperski:

cd boutique-vue
npm install
npm run dev

Vite wypisuje adres, zwykle http://localhost:5173/. Otwórz go: pojawia się strona startowa projektu.

Co utworzył generator

boutique-vue/
├── index.html          ← la seule vraie page HTML du site
├── package.json
├── vite.config.js
├── public/             ← fichiers servis tels quels
└── src/
    ├── main.js         ← point d’entrée : crée et monte l’application
    ├── App.vue         ← composant racine
    ├── assets/
    └── components/

Na razie liczą się trzy pliki. Generator tworzy też src/assets/main.css i base.css, style swojej strony startowej: będzie można je usunąć, razem z linią import './assets/main.css' otwierającą src/main.js, gdy CSS samouczka je zastąpi pod koniec rozdziału.

index.html zawiera pusty kontener i ładuje punkt wejścia. To wszystko: resztę strony wyprodukuje Vue.

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

src/main.js tworzy aplikację na podstawie komponentu głównego i montuje ją w tym kontenerze.

import './assets/main.css'

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

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

createApp(App) buduje instancję, .mount('#app') wskazuje jej element DOM, którym wolno jej zarządzać. Od tego momentu wszystko, co znajduje się w <div id="app">, należy do Vue.

Pierwszy komponent

Plik .vue to komponent jednoplikowy: skrypt, szablon i style tego samego kawałka interfejsu mieszkają w jednym miejscu. Wyczyść src/App.vue i wpisz:

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
</script>

<template>
  <div class="product-display">
    <h1>{{ product }}</h1>
  </div>
</template>

Zapisz: przeglądarka pokazuje „T-Shirt” bez przeładowania. To gorąca podmiana modułów w Vite.

Ten plik będzie rósł aż do rozdziału o komponentach, w którym go podzielimy.

Zrozumieć te siedem linii

<script setup> mówi Vue, że ten blok opisuje logikę komponentu. Wszystko, co zadeklarujesz w nim na pierwszym poziomie, jest dostępne w szablonie, bez żadnego eksportu.

ref('T-Shirt') tworzy referencję reaktywną: pudełko, które przechowuje wartość i uprzedza Vue, kiedy ta się zmienia. W skrypcie pudełko otwiera się przez .value:

const product = ref('T-Shirt')

console.log(product.value)   // 'T-Shirt'
product.value = 'Pull'       // tytuł zmienia się natychmiast na ekranie

W szablonie jest odwrotnie: piszesz {{ product }} bez .value, bo Vue rozpakowuje referencję automatycznie.

Podwójne klamry to interpolacja. Przyjmują dowolne wyrażenie JavaScriptu, nie tylko nazwę zmiennej:

<h1>{{ product }}</h1>
<h1>{{ product.toUpperCase() }}</h1>
<h1>{{ 'Notre ' + product }}</h1>

Reaktywność w praktyce

Zmień wartość początkową na 'Pull' i zapisz: tytuł podąża za nią. Nie trzeba było pisać ani jednej linii, żeby odszukać h1 i podmienić jego treść. To jest sedno Vue: opisujesz, co strona ma wyświetlać w zależności od stanu, a aktualizacją zajmuje się Vue.

A inne narzędzia budowania?

create-vue instaluje Vite, narzędzie rekomendowane przez zespół Vue. Pliki .vue kompilują też inne bundlery: Parcel przez @parcel/transformer-vue albo webpack z vue-loader.

Działają, ale są wolniejsze i wychodzą poza utarte ścieżki. Pomiar z 2 września 2026 roku na tej samej aplikacji złożonej z jednego komponentu:

Vite 8.2.2     build en  1,05 s   →  60,57 kB  (23,91 kB gzip)
Parcel 2.16.4  build en 10,57 s   →  92,77 kB

Wynikiem npm run build jest katalog z plikami statycznymi. To, co się w nim znajdzie, decyduje o twoim pozycjonowaniu, temat omówiony osobno.

W nowym projekcie zostań przy Vite. Alternatywy mają sens tylko wtedy, gdy twój istniejący łańcuch budowania już na nich stoi.

CSS użyty w poradniku

Żeby aplikacja zaczęła przypominać interfejs, utwórz src/assets/boutique.css z kilkoma regułami używanymi we wszystkich rozdziałach:

.product-display { display: flex; gap: 32px; padding: 24px; font-family: system-ui, sans-serif; }
.product-image img { width: 240px; }
.variants-wrapper { display: flex; gap: 10px; }
.color-circle { width: 50px; height: 50px; margin-top: 8px; border: 2px solid #d8d8d8; border-radius: 50%; cursor: pointer; }
.button { border: none; background: #1d4ed8; color: #fff; padding: 10px 18px; border-radius: 6px; cursor: pointer; }
.disabledButton { background-color: #d8d8d8; cursor: not-allowed; }

I zaimportuj go w punkcie wejścia:

import './assets/boutique.css'
import { createApp } from 'vue'
import App from './App.vue'

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