Как създавате страница във 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: '/moqta-stranica', // 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.