Struktura Aplikacji Misji

Każda misja kosmiczna ma precyzyjną strukturę. Zobaczmy, jak zorganizowany jest nasz system.

main.ts - Centrum Dowodzenia

1import { createApp } from 'vue'
2import { createPinia } from 'pinia'
3import App from './App.vue'
4import router from './router'
5
6// Inicjalizacja systemu głównego
7const app = createApp(App)
8
9// Podłączenie modułów
10app.use(createPinia())  // Baza danych misji
11app.use(router)         // System nawigacji
12
13// Start systemu
14app.mount('#app')
15
16console.log('🚀 System NOVA LAB uruchomiony')

App.vue - Główny Interfejs

1<template>
2  <div class="nova-lab">
3    <header class="top-bar">
4      <div class="logo">🔬 NOVA LAB</div>
5      <nav>
6        <RouterLink to="/">Dashboard</RouterLink>
7        <RouterLink to="/mission">Misja</RouterLink>
8        <RouterLink to="/systems">Systemy</RouterLink>
9        <RouterLink to="/crew">Załoga</RouterLink>
10      </nav>
11      <div class="status">
12        <span class="indicator online"></span>
13        Wszystkie systemy online
14      </div>
15    </header>
16
17    <main class="content">
18      <RouterView />
19    </main>
20
21    <footer class="bottom-bar">
22      <p>NOVA LAB Mission Control © 2087</p>
23    </footer>
24  </div>
25</template>
26
27<script setup>
28import { RouterLink, RouterView } from 'vue-router'
29</script>
30
31<style>
32.nova-lab {
33  min-height: 100vh;
34  background: #0a0a1a;
35  color: #e0e0e0;
36}
37
38.top-bar {
39  display: flex;
40  justify-content: space-between;
41  align-items: center;
42  padding: 1rem 2rem;
43  background: #0d1b2a;
44  border-bottom: 1px solid #1b263b;
45}
46
47.indicator.online {
48  display: inline-block;
49  width: 8px;
50  height: 8px;
51  background: #00ff88;
52  border-radius: 50%;
53  margin-right: 0.5rem;
54  animation: pulse 2s infinite;
55}
56
57@keyframes pulse {
58  0%, 100% { opacity: 1; }
59  50% { opacity: 0.5; }
60}
61</style>

index.html - Baza Startowa

1<!DOCTYPE html>
2<html lang="pl">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="icon" href="/rocket.ico" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>NOVA LAB - Mission Control</title>
8  </head>
9  <body>
10    <div id="app"></div>
11    <script type="module" src="/src/main.ts"></script>
12  </body>
13</html>

Sekwencja Startowa

Przeglądarka ładuje
```
index.html
```
Vite ładuje
```
main.ts
```
```
createApp()
```
tworzy instancję systemu
Moduły Pinia i Router są podłączane
```
app.mount('#app')
```
uruchamia interfejs
System gotowy do obsługi misji!

Vai a CodeWorlds→