Sobes.tech
Back to questions
Junior
162

Как вы создаете страницу на Vue?

Answer from AI

sobes.tech AI

Страницу на 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.