Vue.js

Kompletny przewodnik wdrożenia Vue.js na NStrim

Przegląd

Vue.js to progresywny framework JavaScript do budowania interfejsów użytkownika. Został zaprojektowany tak, aby można go było wdrażać stopniowo, i koncentruje się na warstwie widoku, dzięki czemu łatwo zintegrować go z innymi bibliotekami lub istniejącymi projektami.

Zanim zaczniesz
Upewnij się, że masz otwarty pulpit – będą ci potrzebne wyświetlone tam dane logowania do Git. Ten szablon zawiera Vue 3, Tailwind CSS 4, Pinia do zarządzania stanem oraz Vue Router.

Pierwsze kroki

1

Utwórz repozytorium z szablonu

Na pulpicie przejdź do zakładki Tools & Deployment. Kliknij przycisk "New Repository", wybierz szablon Vue.js z listy rozwijanej, wpisz nazwę repozytorium i subdomenę, a następnie kliknij "Create Repository".

2

Sklonuj repozytorium

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Zainstaluj zależności

npm install
4

Uruchom serwer deweloperski

npm run dev

Otwórz http://localhost:4200 w przeglądarce.

5

Zbuduj i wypchnij zmiany

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Każde wypchnięcie do Git automatycznie wdraża twoją aplikację. Sprawdź adres Module Work URL na pulpicie, aby zobaczyć działającą stronę.

Lokalny rozwój z Dockerem

Jeśli nie masz lokalnie zainstalowanego Node.js, możesz użyć Dockera do uruchamiania komend Vue. Projekt zawiera Dockerfile dla buildów produkcyjnych z nginx.

Czym jest Docker?
Docker tworzy izolowane "kontenery" zawierające całe potrzebne oprogramowanie (Node.js, npm) bez instalowania go na twoim komputerze. Można to porównać do lekkiej maszyny wirtualnej.

Wymagania wstępne

Zainstaluj Docker Desktop dla swojego systemu operacyjnego (Windows, Mac lub Linux).

Uruchamianie komend z Dockerem

# Uruchom npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Uruchom serwer deweloperski (dostępny pod localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Zbuduj wersję produkcyjną
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Uwaga
Docker jest opcjonalny dla lokalnego rozwoju. Platforma NStrim obsługuje wdrożenie automatycznie – Docker jest potrzebny tylko, jeśli chcesz uruchamiać komendy lokalnie bez zainstalowanego Node.js.

Struktura projektu

Gdzie znajdują się pliki:

├── src/
│   ├── assets/               # Zasoby statyczne (obrazy, czcionki)
│   ├── components/           # Komponenty Vue
│   ├── views/                # Komponenty stron
│   ├── router/               # Konfiguracja Vue Router
│   ├── stores/               # Store'y Pinia
│   ├── App.vue               # Komponent główny
│   └── main.js               # Punkt wejścia aplikacji
├── public/                   # Publiczne pliki statyczne
├── index.html                # Punkt wejścia HTML
├── vite.config.js            # Konfiguracja Vite
├── package.json              # Zależności i skrypty
└── Dockerfile                # Konfiguracja buildu Docker

Typowe zadania

Tworzenie komponentu

Twórz pliki .vue w katalogu src/components/:

<!-- src/components/Button.vue -->
<script setup>
defineProps({
  label: String
});

const emit = defineEmits(['click']);
</script>

<template>
  <button
    class="bg-blue-500 text-white px-4 py-2 rounded"
    @click="emit('click')"
  >
    {{ label }}
  </button>
</template>

Dodawanie trasy

Edytuj src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

Korzystanie ze store Pinia

Utwórz store w src/stores/:

// src/stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    decrement() { this.count-- }
  }
});

Korzystanie z Tailwind CSS

Tailwind CSS 4 jest wstępnie skonfigurowany. Używaj klas bezpośrednio w szablonach:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Przydatne komendy

npm run dev Uruchom serwer deweloperski (port 4200)
npm run build Zbuduj wersję produkcyjną
npm run preview Podejrzyj build produkcyjny lokalnie
npm run test:unit Uruchom testy jednostkowe z Vitest
npm run lint Sprawdź i napraw styl kodu
npm run format Sformatuj kod za pomocą Prettiera

Rozwiązywanie problemów

npm install kończy się błędami uprawnień

Przyczyna: Problemy z uprawnieniami do cache npm lub node_modules.

Rozwiązanie: Usuń folder node_modules i plik package-lock.json, a następnie ponownie uruchom npm install.

Port 4200 jest już używany

Przyczyna: Inny proces używa portu 4200.

Rozwiązanie: Użyj innego portu: npm run dev -- --port 3000 lub zatrzymaj inny proces.

Komponent się nie aktualizuje

Przyczyna: Reaktywność nie jest poprawnie skonfigurowana.

Rozwiązanie: Używaj ref() dla wartości prymitywnych, a reactive() dla obiektów. Wartości ref pobieraj przez .value w skrypcie, ale nie w szablonie.

Router nie działa

Przyczyna: Brak RouterView w App.vue lub router nie jest zarejestrowany.

Rozwiązanie: Upewnij się, że <RouterView /> jest w App.vue, a router jest dodany przez app.use(router) w main.js.

Build kończy się błędem po wdrożeniu

Przyczyna: Błędy buildu lub brakujące zależności.

Rozwiązanie: Najpierw uruchom npm run build lokalnie, aby sprawdzić błędy przed wypchnięciem zmian.

Proces wdrażania

Za każdym razem, gdy wypychasz kod do Git, twoja aplikacja jest automatycznie budowana i wdrażana:

Zmiana kodu git push npm run build Wdrożenie na nginx Live!

Adres URL twojej wdrożonej aplikacji ma następujący format: 

https://<your-subdomain>-<repo-name>.<session-domain>

Przykład: https://student01-module-a.demo.nstrim.app

Aby uzyskać więcej informacji, odwiedź oficjalną Dokumentację Vue.js.