I AM

Шаг 1. Установка зависимостей в директории demo

В рамках этой демонстрации мы создадим первый абстрактный компонент — простой счётчик с двумя кнопками для увеличения и уменьшения значения.

Откройте проект TaskBoard и перейдите в директорию demo. Именно в этом разделе мы будем создавать и просматривать независимые компоненты.

Установите зависимости:

npm ci

Запустите проект:

npm run dev

Шаг 2. Создание компонента DemoCounter.vue

Создайте директорию demo/src/demo0. Внутри неё создайте файл DemoCounter.vue.

Шаг 3. Создание шаблона для компонента счётчика

Компонент счётчика должен показывать текущее значение внутренней переменной и предоставлять возможность увеличивать или уменьшать его с помощью элементов управления.

Для начала опишем базовую структуру компонента — блок с текущим значением и две кнопки, отвечающие за изменение счёта в большую или меньшую сторону.

Добавьте следующий код в файл DemoCounter.vue:

<template>
    <div>
        <button> - </button>

        <span> Current value: 0 </span>

        <button> + </button>
    </div>
</template>

Шаг 4. Добавление маршрута для компонента

Для того чтобы компонент был доступен в браузере, необходимо настроить маршрутизацию. Откройте файл demo/src/routes.js и добавьте объект в массив:

export default [
  {
    name: 'Counter Base',
    path: '/counter-0',
    component: () => import("./demo0/DemoCounter.vue"),
  },
];

Мы пока не знакомы с маршрутизатором vue-router — изучим его в третьем разделе. А сейчас просто покажем, как устроен файл demo/src/router/index.js.

import { createRouter, createWebHistory } from "vue-router";
import routes from '../routes'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("../components/DemoMenu.vue"),
    },
    ...routes,
  ],
});

export default router;

Запустите проект командой npm run dev в директории demo. Откройте браузер по адресу localhost:8081.

На данном этапе мы ещё не изучили обработчики событий и хранение данных, поэтому счётчик пока не будет реагировать на действия пользователя.

НазадДалее