Чӣ тавр шумо саҳифа дар Vue месозед?

Страницаро дар Vue одатан ҳамчун як компонент алоҳида (.vue файл) сохта мешавад, ки аз се қисм иборат аст: <template>, <script> ва <style>.

<template>: Сохтани сохтори HTML-и саҳифа бо истифода аз шаблонҳои Vue барои пайваст кардани маълумот ва логика.
```
<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <p>{{ pageContent }}</p>
  </div>
</template>
```

<script>: Дар бар мегирад логикаи JavaScript-и саҳифа, аз ҷумла муайян кардани маълумот (data), хосиятҳои ҳисобшаванда (computed), усулҳо (methods), хуки ҳаёти ва дигар имкониятҳои компонент.

<script>
export default {
  data() {
    return {
      pageTitle: 'Саҳифаи Vue-и ман',
      pageContent: 'Ин мазмуни аввалини саҳифаи Vue-и ман аст.'
    };
  },
  mounted() {
    // Логикаи иҷрошуда пас аз монтажи компонент
    console.log('Саҳифа монтаж шуд!');
  }
}
</script>

<style>: Мазмуни CSS, ки ба компонент татбиқ мешавад. Модификатори scoped метавонад маҳдудияти соҳаи стилҳоро танҳо ба ин компонент маҳдуд кунад.
```
<style scoped>
h1 {
  color: blue;
}

p {
  font-size: 16px;
}
</style>
```

Компоненти сохташударо сипас дар файли маршрути (масалан, бо истифода аз vue-router) ворид мекунанд ва бо URL муайян пайваст мекунанд, ки имкон медиҳад, ки дар вақти гузаштан ба он 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 муайян.