You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.6 KiB
43 lines
1.6 KiB
<template>
|
|
<div class="p-5 mb-4 bg-light rounded-3 shadow-sm">
|
|
<div class="container-fluid py-5">
|
|
<h1 class="display-5 fw-bold">Vítejte v aplikaci Produkty!</h1>
|
|
<p class="col-md-8 fs-4">
|
|
Toto je jednoduchá ukázková aplikace postavená na Vue.js 3, která demonstruje
|
|
použití Vue Routeru pro navigaci mezi stránkami a Axiosu pro načítání
|
|
dat z externího API (dummyjson.com).
|
|
</p>
|
|
<router-link class="btn btn-primary btn-lg" to="/products">
|
|
Zobrazit produkty
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row align-items-md-stretch">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="h-100 p-5 text-white bg-dark rounded-3 shadow">
|
|
<h2>Vue Router</h2>
|
|
<p>Procházejte mezi stránkami "Domů", "Produkty" a detailem jednotlivých produktů pomocí navigační lišty výše. Vue Router se stará o plynulé přechody bez nutnosti znovunačítání celé stránky.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="h-100 p-5 bg-body-secondary border rounded-3 shadow">
|
|
<h2>Axios & API</h2>
|
|
<p>Na stránce "Produkty" uvidíte seznam produktů načtených asynchronně pomocí knihovny Axios z veřejného API. Kliknutím na produkt zobrazíte jeho detailní informace, které se také načítají dynamicky.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HomePage',
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Styly specifické pouze pro tuto komponentu */
|
|
.display-5 {
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|