Hogyan készít egy oldalt Vue-ban?

Egy Vue oldalt általában külön komponensként (.vue fájl) hoznak létre, amely három szakaszból áll: <template>, <script> és <style>.

1. <template>: Meghatározza az oldal HTML-struktúráját, a Vue sablon szintaxisát használva az adatok és a logika kötéséhez.

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

2. <script>: Tartalmazza az oldal JavaScript-logikáját, ideértve az adatok (data), számított tulajdonságok (computed), metódusok (methods), életciklus hook-ok és más komponens opciók meghatározását.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Az én Vue oldalam',
         pageContent: 'Ez az első Vue oldalam tartalma.'
       };
     },
     mounted() {
       // Logika, amely a komponens felszerelése után fut
       console.log('Az oldal felszerelve!');
     }
   }
   </script>
   

3. <style>: Tartalmazza a komponenshez tartozó CSS-stílusokat. A scoped módosítóval korlátozható a stílusok hatóköre csak erre a komponensre.

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

A létrehozott komponens ezután importálható a routing fájlba (pl. vue-router használatával), és hozzárendelhető egy adott URL-hez, így az oldal megjelenik, amikor arra navigálunk.

// router/index.js (példa vue-router-rel)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Az oldal komponensének importálása

const routes = [
  {
    path: '/my-page', // Az oldal URL-je
    name: 'MyPage',
    component: MyPage // A komponens, amely megjelenik
  }
];

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

export default router;

A fő alkalmazásfájlban (main.js) a router csatlakozik a Vue példányhoz.

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

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

Röviden, egy Vue oldal létrehozása annyi, mint egy olyan komponens készítése, amely leírja az oldal szerkezetét, logikáját és stílusát, és a router konfigurálása, hogy ez a komponens megjelenjen egy adott URL-en.