Projekt: Panel Kontrolny NOVA LAB

Gratulacje, kadetcie! Dotarliśmy do finalnego projektu pierwszego modułu na stacji NOVA LAB. Czas połączyć wszystkie poznane umiejętności w jeden funkcjonalny system.

Cel projektu

Zbuduj kompletny Panel Kontrolny NOVA LAB - aplikację Vue.js, która łączy wszystkie koncepty z tego modułu:

• Vue.js i Vite - nowoczesny framework reaktywny
• Single File Components - organizacja kodu w plikach .vue
• Struktura aplikacji - poprawna hierarchia komponentów
• Vue DevTools - narzędzia diagnostyczne do debugowania

Wymagania projektu

Twój Panel Kontrolny powinien zawierać:

1. Sekcja statusu stacji

Wyświetl nazwę stacji, aktualny status (ONLINE/OFFLINE) oraz datę ostatniej aktualizacji. Użyj interpolacji Vue do wyświetlania danych.

2. Lista modułów stacji

Stwórz tablicę z minimum 4 modułami stacji (np. Laboratorium, Reaktor, Komunikacja, Nawigacja). Każdy moduł powinien mieć nazwę, status i poziom energii.

3. Stylowanie komponentu

Użyj sekcji

<style scoped>

aby nadać aplikacji wygląd panelu kosmicznego - ciemne tło, neonowe kolory, futurystyczny design.

Wskazówki

• Zacznij od sekcji

  <script setup>

  z danymi reaktywnymi
• Użyj

  ref()

  dla prostych wartości i

  reactive()

  dla obiektów
• Pamiętaj o sekcji

  <template>

  z poprawną składnią Vue
• Dodaj

  <style scoped>

  na końcu komponentu

Eksperymentuj z kodem poniżej i rozbuduj go o własne pomysły!