როგორ ქმნით გვერდს Vue-ში?

Vue-ზე გვერდს ჩვეულებრივ ქმნიან როგორც ცალკეულ კომპონენტს (.vue ფაილი), რომელიც შედგება სამი სექციისგან: <template>, <script> და <style>.

1. <template>: განსაზღვრავს HTML სტრუქტურას გვერდზე, Vue-ის შაბლონების გამოყენებით მონაცემთა დაკავშირებისა და ლოგიკისთვის.

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

2. <script>: შეიცავს გვერდის JavaScript ლოგიკას, მათ შორის მონაცემების განსაზღვრას (data), გამოთვლადი თვისებების (computed), მეთოდების (methods), სიცოცხლის ციკლის ჰუქებს და სხვა ვარიანტებს.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'ჩემი Vue გვერდი',
         pageContent: 'ეს არის ჩემი პირველი Vue გვერდის შინაარსი.'
       };
     },
     mounted() {
       // ლოგიკა, რომელიც ხორციელდება კომპონენტის მონტაჟის შემდეგ
       console.log('გვერდი მონტაჟებულია!');
     }
   }
   </script>
   

3. <style>: შეიცავს CSS სტილებს, რომლებიც გამოიყენება კომპონენტზე. შეიძლება გამოიყენოთ scoped მოდიფიკატორი, რათა სტილები იყოს მხოლოდ ამ კომპონენტისთვის.

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

შექმნილი კომპონენტი შემდეგ იმპორტდება რუტერის ფაილში (მაგალითად, vue-router-ის გამოყენებით) და უკავშირდება გარკვეულ URL-ს, რაც საშუალებას აძლევს ამ მისამართზე გადასვლისას ამ გვერდის ჩვენებას.

// router/index.js (vue-router-ის მაგალითი)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // გვერდის კომპონენტის იმპორტი

const routes = [
  {
    path: '/my-page', // გვერდის URL-მისამართი
    name: 'MyPage',
    component: MyPage // კომპონენტი, რომელიც გამოჩნდება
  }
];

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

export default router;

ძირითადი ფაილში (main.js) რუტერი უკავშირდება Vue-ის აპლიკაციის ინსტანციას.

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

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

ამგვარად, Vue-ზე გვერდის შექმნა გულისხმობს მისი სტრუქტურის, ლოგიკის და სტილების აღწერას კომპონენტში, და შემდეგ რუტერის კონფიგურაციას ამ კომპონენტის გარკვეულ URL-ზე ჩვენებისთვის.