Tworzenie pierwszej aplikacji w Vue 3

Dodanie Vue przez CDN

Jak załadować Vue 3 przez CDN: Najprostszym sposobem rozpoczęcia pracy z Vue 3, bez konieczności instalowania narzędzi czy tworzenia projektu build, jest skorzystanie z CDN (Content Delivery Network). Framework Vue można załadować bezpośrednio na stronę HTML za pomocą tagu <script> wskazującego na plik biblioteki udostępniony przez CDN. Na przykład, aby załadować Vue 3 z popularnego CDN unpkg, wystarczy umieścić w sekcji <head> lub na końcu <body> następujący element script:

 <!-- Ładowanie Vue 3 z CDN (unpkg) -->
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Powyższy skrypt wczytuje globalną wersję Vue 3, w której wszystkie najważniejsze API są dostępne poprzez globalny obiekt Vue. Można także użyć innych CDN obsługujących paczki npm, takich jak jsDelivr czy cdnjs, lub pobrać plik z Vue i hostować go samodzielnie. Dzięki tej metodzie nie ma potrzeby przeprowadzania kroku kompilacji czy używania narzędzi typu webpack – kod działa od razu w przeglądarce.

Przykład użycia Vue 3 bez budowania projektu: Po załadowaniu biblioteki z CDN możemy od razu utworzyć prostą aplikację Vue. Wystarczy w HTML przygotować element, do którego „przywiążemy” aplikację (np. <div id="app">), a następnie w skrypcie stworzyć instancję aplikacji za pomocą Vue.createApp i zamontować ją na tym elemencie. Poniżej znajduje się przykład minimalnej aplikacji Vue 3 osadzonej w pojedynczym pliku HTML:

 <!DOCTYPE html>
 <html lang="pl">
 <head>
  <meta charset="UTF-8" />
  <title>Pierwsza aplikacja Vue 3</title>
  <!-- Dodanie Vue 3 z CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 </head>
 <body>
  <!-- Element, do którego zostanie zamontowana aplikacja Vue -->
  <div id="app">
    {{ message }}
  </div>

  <script>
    // Wyodrębnienie funkcji createApp z globalnego obiektu Vue
    const { createApp } = Vue;
    // Utworzenie instancji aplikacji Vue
    createApp({
      data() {
        return {
          message: 'Witaj Vue!'
        };
      }
    }).mount('#app'); // Zamontowanie aplikacji do elementu o id="app"
  </script>
 </body>
 </html>

W powyższym kodzie po załadowaniu biblioteki Vue tworzymy aplikację za pomocą createApp. Wykorzystujemy API opcji (Options API) – przekazujemy obiekt z danymi (data) do funkcji createApp. Obiekt data() zwraca stan aplikacji (tu jedna właściwość message), który następnie interpolujemy w elemencie <div id="app"> za pomocą składni {{ message }}. Metoda mount('#app') sprawia, że Vue przejmuje kontrolę nad elementem o podanym selektorze i renderuje w nim nasz szablon z danymi.

Zalety metody CDN dla początkujących: Dodawanie Vue przez CDN jest szczególnie przyjazne dla osób początkujących z kilku powodów:

  • Brak konfiguracji i budowania: Nie wymaga instalacji Node.js, konfiguracji bundlera ani żadnych kroków kompilacji – wystarczy dodać skrypt i można od razu pisać kod Vue. Taka konfiguracja jest dużo prostsza i świetnie nadaje się do szybkiego prototypowania lub dodawania Vue do istniejącej statycznej strony HTML.
  • Szybki start: Pozwala w ciągu minut zobaczyć efekty działania frameworka, co jest motywujące dla początkujących. Można skupić się na nauce samego Vue, zamiast na narzędziach do budowania projektu.
  • Łatwa integracja: Metoda CDN umożliwia stopniowe integrowanie Vue z istniejącymi projektami backendowymi lub statycznymi stronami – można dodać Vue tylko do wybranych części interfejsu bez przebudowy całej aplikacji.

Ograniczenia tej metody: Mimo wygody, ładowanie Vue z CDN ma pewne ograniczenia istotne z perspektywy dalszej nauki i rozwoju aplikacji:

  • Brak SFC i narzędzi deweloperskich: Przy takiej prostej konfiguracji nie można używać składni Single-File Component (SFC), czyli pojedynczych plików .vue zawierających szablon, skrypt i style komponentu. Jesteśmy ograniczeni do pisania kodu w zwykłych <script> w HTML, co przy większych projektach staje się mało wygodne.
  • Mniejsza skalowalność: Tworzenie większej aplikacji z wieloma komponentami staje się trudne bez modułowego systemu plików i build step. Dla rozbudowanych projektów zaleca się użycie narzędzi (np. Vue CLI z Vite) i strukturyzację aplikacji w komponentach SFC.
  • Wydajność i zależności: Przy bezpośrednim dodaniu z CDN wszystkie skrypty ściągane są przy każdym odświeżeniu strony. Chociaż CDN często korzysta z cachowania, w środowisku produkcyjnym zazwyczaj lepiej mieć kontrolę nad wersjami i pakować aplikację. Ponadto, dodając kolejne biblioteki (np. Vue Router, Vuex/Pinia) również przez CDN, trzeba ręcznie dbać o ich poprawne wczytanie we właściwej kolejności.

Podsumowując, dla początkujących korzystanie z Vue przez CDN jest znakomitym sposobem na pierwsze kroki – pozwala szybko zobaczyć działanie frameworka i zrozumieć podstawy, zanim przejdziemy do bardziej zaawansowanych narzędzi.