Tworzenie i uruchamianie projektu Vue.js na macOS z ServBay

Vue.js to popularny progresywny framework JavaScript do budowy interfejsów użytkownika. Jest łatwy w użyciu, elastyczny oraz wydajny, szczególnie polecany do aplikacji jednostronicowych (SPA). ServBay, jako zaawansowane lokalne środowisko do rozwoju stron WWW, oferuje wygodną obsługę Node.js, dzięki czemu jest idealną platformą do pracy z Vue.js na macOS.

W tym przewodniku znajdziesz szczegółowe informacje, jak wykorzystać zintegrowane środowisko ServBay do stworzenia od zera projektu Vue.js oraz jak uzyskiwać do niego dostęp zarówno w trybie deweloperskim, jak i produkcyjnym.

Czym jest Vue.js?

Vue.js to progresywny framework JavaScript do budowy interfejsów użytkownika. W przeciwieństwie do innych rozbudowanych frameworków, Vue oparty jest na podejściu przyrostowym od podstaw. Biblioteka bazowa Vue koncentruje się wyłącznie na warstwie widoku, jest łatwa do opanowania i łatwo integruje się z innymi bibliotekami lub istniejącymi projektami. Najnowsza wersja, Vue 3, wprowadziła wiele nowości i usprawnień, w tym wyższą wydajność, mniejszy rozmiar paczki oraz lepsze wsparcie dla TypeScript.

Najważniejsze cechy i zalety Vue 3

• Composition API (API kompozycyjne): Umożliwia organizowanie logiki komponentów za pomocą funkcji, dzięki czemu praca nad dużymi komponentami staje się bardziej czytelna i umożliwia ponowne wykorzystanie kodu.
• Lepsza wydajność: Vue 3 korzysta z obiektu Proxy, by zapewnić reaktywność oraz zoptymalizowano algorytm wirtualnego DOM, uzyskując znaczący wzrost wydajności.
• Mniejszy rozmiar paczki: Dzięki technice Tree-shaking, rdzeń Vue 3 jest lżejszy i ładuje się szybciej.
• Lepsze wsparcie dla TypeScript: Vue 3 zapewnia rozbudowane typy, dlatego programowanie w TypeScript staje się jeszcze wygodniejsze.
• Usprawnione cykle życia komponentów: Nowe hooki cyklu życia oraz funkcja Setup sprawiają, że logika komponentów jest bardziej przejrzysta i łatwiejsza do zarządzania.

Korzystając z Vue 3, programiści mogą sprawniej tworzyć nowoczesne, responsywne aplikacje webowe.

Tworzenie i uruchamianie projektu Vue.js w środowisku ServBay

W tym artykule pokażemy, jak w środowisku Node.js dostarczanym przez ServBay utworzyć i uruchomić projekt Vue.js. Skorzystamy z funkcji Witryny w ServBay, by skonfigurować serwer WWW i umożliwić lokalny dostęp do projektu za pośrednictwem odwrotnego proxy oraz obsługi plików statycznych.

Wymagania wstępne

Zanim rozpoczniesz, upewnij się, że:

1. ServBay jest zainstalowany: Masz już zainstalowane środowisko ServBay na macOS.
2. Zainstalowano pakiet Node.js: Przez menedżera pakietów ServBay zainstalowano Node.js. Szczegółowe kroki znajdziesz w Instalacja i używanie Node.js w ServBay.

Tworzenie projektu Vue.js

1. Inicjalizacja projektu

   Otwórz terminal. ServBay zaleca umieszczanie projektów stron WWW w katalogu /Applications/ServBay/www. Przejdź do tego folderu i zainicjuj nowy projekt Vue.js używając polecenia npm create vue@latest. Dzięki @latest masz pewność, że korzystasz z najnowszej wersji narzędzia create-vue lub Vue CLI, które domyślnie tworzy projekt na Vue 3.

   cd /Applications/ServBay/www
   npm create vue@latest

   Postępuj zgodnie z instrukcjami w terminalu, podając nazwę projektu (rekomendowana: servbay-vue-app) i wybierając preferowane opcje (TypeScript, Vue Router, Pinia itd.) według własnych potrzeb. Przykładowa konfiguracja:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # wybierz Tak lub Nie w zależności od potrzeb
   ✔ Add JSX Support? … No # wybierz Tak lub Nie w zależności od potrzeb
   ✔ Add Vue Router for Single Page Application development? … Yes # rekomendowane Tak
   ✔ Add Pinia for state management? … No # wybierz Tak lub Nie w zależności od potrzeb
   ✔ Add Vitest for Unit testing? … No # wybierz Tak lub Nie w zależności od potrzeb
   ✔ Add an End-to-End Testing Solution? … No # wybierz Tak lub Nie w zależności od potrzeb
   ✔ Add ESLint for code quality? … Yes # rekomendowane Tak
   ✔ Add Prettier for code formatting? … Yes # rekomendowane Tak
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # wybierz Tak lub Nie w zależności od potrzeb

2. Instalacja zależności

   Po inicjalizacji przejdź do nowo utworzonego folderu projektu servbay-vue-app i zainstaluj zależności za pomocą polecenia:

   cd servbay-vue-app
   npm install

Zmiana przykładowej zawartości projektu (opcjonalnie)

Aby zweryfikować, czy projekty działa poprawnie, zmodyfikuj plik src/App.vue, zamieniając jego domyślną zawartość prostym komunikatem "Hello ServBay!".

Otwórz plik src/App.vue i zamień zawartość na:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>To jest aplikacja Vue.js uruchomiona przez ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Konfiguracja środowiska deweloperskiego (przez odwrotny proxy)

W trybie deweloperskim Vue uruchamia lokalny serwer deweloperski (Vite lub Webpack), który umożliwia gorące przeładowanie strony oraz wygodną pracę. ServBay umożliwia ustawienie odwrotnego proxy, przekierowując lokalną domenę na ten serwer i port.

1. Uruchomienie serwera deweloperskiego

   W głównym folderze projektu uruchom komendę, która startuje serwer w trybie dev. Za pomocą opcji --port określ port (np. 8585) - upewnij się, że nie jest zajęty przez inny proces.

   npm run dev -- --port 8585

   Terminal wyświetli adres serwera, np. http://localhost:8585.

2. Konfiguracja odwrotnego proxy w ServBay

   Otwórz aplikację ServBay, przejdź do sekcji Witryny i dodaj nową konfigurację typu Odwrotny Proxy:

   • Nazwa: My first Vue dev site (lub inna dowolna)
   • Domena: servbay-vue-dev.servbay.demo (lub inną, kończącą się na .servbay.demo)
   • Typ witryny: Odwrotny proxy
   • IP docelowy proxy: 127.0.0.1
   • Port docelowy proxy: 8585 (ten sam, na którym działa serwer dev)

   Po zapisaniu ustawień, ServBay automatycznie zaktualizuje konfigurację serwera WWW (Caddy lub Nginx) i skieruje ruch na servbay-vue-dev.servbay.demo do http://127.0.0.1:8585.

   Szczegółowa instrukcja znajduje się w Dodawanie strony Node.js w ServBay.

3. Dostęp do trybu deweloperskiego

   Upewnij się, że serwer WWW ServBay jest uruchomiony. Otwórz przeglądarkę i wejdź na skonfigurowaną domenę: https://servbay-vue-dev.servbay.demo.

   ServBay automatycznie konfiguruje certyfikaty SSL dla domen lokalnych (ServBay User CA lub ServBay Public CA), więc możesz przeglądać stronę po HTTPS, jak w środowisku produkcyjnym. Po szczegóły zajrzyj do Konfiguracja SSL w ServBay.

   Gotowe – w przeglądarce zobaczysz aplikację Vue działającą w trybie deweloperskim, a zmiany w kodzie będą od razu widoczne dzięki hot reloadowi.

Budowanie wersji produkcyjnej i wdrożenie (statyczny serwis www)

Gdy projekt Vue.js jest gotowy do publikacji, należy zbudować zoptymalizowaną wersję do produkcji. Jest to paczka plików statycznych (HTML, CSS, JS), którą łatwo udostępnić przez ServBay.

1. Budowanie produkcyjne

   W katalogu głównym projektu uruchom polecenie budujące wersję produkcyjną:

   npm run build

   Pliki wynikowe znajdziesz w folderze dist w katalogu projektu.

2. Konfiguracja serwisu statycznego

   W ServBay przejdź do sekcji Witryny i dodaj nową witrynę typu Statyczna:

   • Nazwa: My first Vue production site (lub inna)
   • Domena: servbay-vue-prod.servbay.demo (lub własna kończąca się .servbay.demo)
   • Typ witryny: Statyczna
   • Katalog główny: /Applications/ServBay/www/servbay-vue-app/dist (ścieżka do katalogu dist w Twoim projekcie)

   Zapisz ustawienia – teraz serwer ServBay będzie obsługiwać bezpośrednio pliki statyczne z folderu dist.

3. Dostęp do wersji produkcyjnej

   Upewnij się, że serwer WWW ServBay działa. W przeglądarce przejdź na domenę: https://servbay-vue-prod.servbay.demo.

   Zobaczysz zoptymalizowaną produkcyjną wersję swojej aplikacji Vue, uruchomioną lokalnie z wykorzystaniem niestandardowej domeny i automatycznego SSL dzięki ServBay.

Wskazówki

• Konflikt portów: Jeśli port 8585 (lub inny ustawiony) jest zajęty, npm run dev zgłosi błąd. Zmień port i zaktualizuj ustawienia proxy w ServBay.
• Status serwera WWW: Sprawdź, czy serwer WWW ServBay (Caddy lub Nginx, w zależności od konfiguracji) jest uruchomiony, w przeciwnym razie nie uzyskasz dostępu do strony przez domenę.
• Rozwiązywanie nazw domen: ServBay automatycznie przekierowuje domeny .servbay.demo na localhost (127.0.0.1). W przypadku innych domen możesz wymagać ręcznej edycji pliku hosts lub skorzystania z Menedżera Hosts ServBay.

Podsumowanie

Za pomocą ServBay łatwo zbudujesz na macOS lokalne środowisko Node.js, którym wygodnie zarządzasz zarówno w fazie rozwoju, jak i wdrażania produkcyjnego projektu Vue.js. Dzięki funkcji Witryny możesz szybko skonfigurować odwrotny proxy do serwera deweloperskiego lub obsługiwać pliki statyczne wersji produkcyjnej – korzystając z niestandardowych domen oraz automatycznego SSL. To znacznie upraszcza konfigurację i workflow przy lokalnym rozwoju projektów Vue.js.