Jak vytvoříte stránku ve Vue?

Stránku ve Vue obvykle vytvářejí jako samostatnou komponentu (.vue soubor), která se skládá ze tří sekcí: <template>, <script> a <style>.

1. <template>: Definuje HTML strukturu stránky s využitím Vue šablonové syntaxe pro vazbu dat a logiky.

   <template>
     <div>
       <h1>{{ pageTitle }}</h1>
       <p>{{ pageContent }}</p>
     </div>
   </template>
   

2. <script>: Obsahuje JavaScriptovou logiku stránky, včetně definice dat (data), vypočítaných vlastností (computed), metod (methods), hooků životního cyklu a dalších možností komponenty.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Moje Vue stránka',
         pageContent: 'Toto je obsah mé první Vue stránky.'
       };
     },
     mounted() {
       // Logika, která se spustí po namontování komponenty
       console.log('Stránka namontována!');
     }
   }
   </script>
   

3. <style>: Obsahuje CSS styly aplikované na komponentu. Pomocí modifikátoru scoped lze omezit styly pouze na tuto komponentu.

   <style scoped>
   h1 {
     color: blue;
   }
   
   p {
     font-size: 16px;
   }
   </style>
   

Vytvořená komponenta je poté importována do souboru routování (například s použitím vue-router) a přiřazena ke konkrétní URL, což umožní při navigaci na tuto adresu zobrazit tuto stránku.

// router/index.js (příklad s vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Import komponenty stránky

const routes = [
  {
    path: '/má-stránka', // URL stránky
    name: 'MyPage',
    component: MyPage // Komponenta, která bude zobrazena
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

V hlavním souboru aplikace (main.js) je router připojen k instanci Vue.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Stručně řečeno, vytvoření stránky ve Vue spočívá v tvorbě komponenty, která popisuje její strukturu, logiku a styly, a v konfiguraci routeru tak, aby tuto komponentu zobrazoval na specifické URL.