Как вы создаете страницу на 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.