Kaip kuriate puslapį Vue?

Puslapį Vue dažniausiai kuria kaip atskirą komponentą (.vue failą), kuris susideda iš trijų skyrių: <template>, <script> ir <style>.

1. <template>: Apibrėžia HTML struktūrą puslapyje, naudojant Vue šablonus duomenų ryšiams ir logikai.

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

2. <script>: Turi puslapio JavaScript logiką, įskaitant duomenų apibrėžimą (data), apskaičiuotas savybes (computed), metodus (methods), gyvenimo ciklo kabliukus ir kitus komponento nustatymus.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Mano Vue puslapis',
         pageContent: 'Tai mano pirmojo Vue puslapio turinys.'
       };
     },
     mounted() {
       // Logika, vykdoma po komponento montavimo
       console.log('Puslapis įmontuotas!');
     }
   }
   </script>
   

3. <style>: Turi CSS stilius, taikomus komponentui. Naudojant scoped modifikatorių, stiliai būna taikomi tik šiam komponentui.

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

Sukurtas komponentas vėliau importuojamas į maršrutizatoriaus failą (pvz., naudojant vue-router) ir susiejamas su tam tikru URL, leidžiantį parodyti šį puslapį naršant.

// router/index.js (pavyzdys su vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Puslapio komponento importas

const routes = [
  {
    path: '/my-page', // Puslapio URL adresas
    name: 'MyPage',
    component: MyPage // Komponentas, kuris bus rodomas
  }
];

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

export default router;

Pagrindiniame programos faile (main.js) maršrutizatorius prijungiamas prie Vue aplikacijos instancijos.

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

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

Taip Vue puslapio kūrimas apima jo struktūros, logikos ir stilių aprašymą komponentėje, ir vėlesnį maršrutizatoriaus konfigūravimą, kad šis komponentas būtų rodomas tam tikru URL.