We use cookies to enhance your experience on the site
Mission Application Structure
Every space mission has a precise structure. Let's see how our system is organized.
main.ts - Mission Control Center
1import { createApp } from 'vue'
2import { createPinia } from 'pinia'
3import App from './App.vue'
4import router from './router'
5
6// Initialize the main system
7const app = createApp(App)
8
9// Connect modules
10app.use(createPinia()) // Mission database
11app.use(router) // Navigation system
12
13// Start the system
14app.mount('#app')
15
16console.log('🚀 NOVA LAB system launched')App.vue - Main Interface
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">Mission</RouterLink>
8 <RouterLink to="/systems">Systems</RouterLink>
9 <RouterLink to="/crew">Crew</RouterLink>
10 </nav>
11 <div class="status">
12 <span class="indicator online"></span>
13 All systems 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 - Launch Base
1<!DOCTYPE html>
2<html lang="en">
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>Launch Sequence
- The browser loads
index.html - Vite loads
main.ts
creates the system instancecreateApp()- Pinia and Router modules are connected
starts the interfaceapp.mount('#app')- System ready to handle the mission!