Single File Components - Moduły Systemu

W NOVA LAB każdy moduł statku jest samodzielną jednostką - ma własne zasilanie, logikę i obudowę. Tak samo Vue Single File Component łączy template, script i style w jednym pliku.

Anatomia Modułu .vue

1<template>
2  <!-- INTERFEJS - co widzi astronauta -->
3  <div class="life-support-panel">
4    <h1>{{ systemName }}</h1>
5    <p>Poziom tlenu: {{ oxygenLevel }}%</p>
6    <div class="status" :class="statusClass">{{ status }}</div>
7  </div>
8</template>
9
10<script setup>
11// LOGIKA - jak działa system
12import { ref, computed } from 'vue'
13
14const systemName = ref('System Podtrzymywania Życia')
15const oxygenLevel = ref(98.5)
16
17const status = computed(() =>
18  oxygenLevel.value > 90 ? 'OPTYMALNY' : 'OSTRZEŻENIE'
19)
20
21const statusClass = computed(() =>
22  oxygenLevel.value > 90 ? 'status-ok' : 'status-warning'
23)
24</script>
25
26<style scoped>
27/* WYGLĄD - jak wygląda panel */
28.life-support-panel {
29  background: #0a1628;
30  border: 2px solid #00ff88;
31  border-radius: 8px;
32  padding: 1.5rem;
33  color: #e0e0e0;
34}
35
36.status-ok { color: #00ff88; }
37.status-warning { color: #ffaa00; }
38</style>

Trzy Sekcje Modułu

1.

<template>

- Interfejs Użytkownika

• Definiuje co widzi astronauta
• Używa składni Vue (dyrektywy, interpolacja)
• Musi być przejrzysty - w sytuacji kryzysowej nie ma czasu na szukanie

2.

<script setup>

- Logika Systemu

• Nowoczesna składnia Composition API
• Automatyczny eksport zmiennych
• Reaktywność z Vue

3.

<style scoped>

- Wygląd Panelu

• CSS specyficzny dla modułu

• scoped

  izoluje style - jeden moduł nie psuje drugiego
• Ciemne tło, jasne akcenty - standard kosmiczny

<script setup>

vs stara składnia

1<!-- PROTOKÓŁ NOWA (zalecany) -->
2<script setup>
3import { ref } from 'vue'
4const pressure = ref(101.3)
5</script>
6
7<!-- STARY PROTOKÓŁ (legacy) -->
8<script>
9import { ref } from 'vue'
10export default {
11  setup() {
12    const pressure = ref(101.3)
13    return { pressure }
14  }
15}
16</script>

W NOVA LAB używamy wyłącznie nowego protokołu - jest krótszy i bezpieczniejszy.