Komponenty - Moduły Budowlane Bazy

Witaj w Drukarni 3D NOVA LAB! Dr. Nova mówi: tak jak drukarka 3D tworzy modułowe części habitatu marsjańskiego, Ty nauczysz się tworzyć komponenty Vue - wielokrotnego użytku elementy aplikacji.

Czym jest Komponent?

Komponent to wielokrotnego użytku, samodzielna jednostka UI z własnym szablonem, logiką i stylami - jak moduł habitatowy, który można łączyć z innymi.

1<!-- ModuleCard.vue -->
2<template>
3  <article class="module-card" style="background: #0a0e27; border: 1px solid #00b4d8; color: #00ff88;">
4    <div class="module-icon">🏗️</div>
5    <h3>{{ moduleName }}</h3>
6    <p>{{ moduleType }}</p>
7    <p class="status">{{ status }}</p>
8  </article>
9</template>
10
11<script setup>
12import { ref } from 'vue'
13
14const moduleName = ref('Oxygen Generator Alpha')
15const moduleType = ref('Life Support')
16const status = ref('ACTIVE')
17</script>
18
19<style scoped>
20.module-card {
21  border-radius: 8px;
22  padding: 1rem;
23  max-width: 300px;
24}
25
26.module-icon {
27  font-size: 3rem;
28  text-align: center;
29}
30
31.status {
32  color: #00ff88;
33  font-weight: bold;
34}
35</style>

Używanie Komponentu

1<!-- App.vue -->
2<template>
3  <div class="production-bay" style="background: #0a0e27;">
4    <ModuleCard />
5    <ModuleCard />
6    <ModuleCard />
7  </div>
8</template>
9
10<script setup>
11import ModuleCard from './components/ModuleCard.vue'
12</script>

Nazewnictwo Komponentów

1<script setup>
2// PascalCase - zalecane
3import ArtworkCard from './ArtworkCard.vue'
4import UserProfile from './UserProfile.vue'
5import NavigationMenu from './NavigationMenu.vue'
6
7// W template - PascalCase lub kebab-case
8</script>
9
10<template>
11  <!-- PascalCase -->
12  <ArtworkCard />
13  <UserProfile />
14
15  <!-- lub kebab-case -->
16  <artwork-card />
17  <user-profile />
18</template>

Organizacja Plików

1src/
2├── components/
3│   ├── common/
4│   │   ├── BaseButton.vue
5│   │   ├── BasePanelCard.vue
6│   │   └── BaseInput.vue
7│   ├── modules/
8│   │   ├── ModuleCard.vue
9│   │   ├── ModuleList.vue
10│   │   └── ModuleDetail.vue
11│   └── layout/
12│       ├── MissionHeader.vue
13│       ├── ControlFooter.vue
14│       └── NavSidebar.vue