Vue Academy · Урок

Написание историй компонентов

Формат CSF3, экспорт по умолчанию (title, component), именованные экспорты как истории и args

Урок 2 из 413 шагов

«Написание историй компонентов» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Истории описывают состояния компонентов

История описывает одно состояние компонента — конкретный набор свойств и содержимого. У кнопки могут быть истории Primary, Secondary и Disabled. Storybook отображает каждую из них как отдельный пример, который можно просматривать.

CSF3: современный формат

Storybook использует Component Story Format 3 (CSF3). Файл содержит один экспорт по умолчанию с описанием компонента и именованные экспорты для каждой истории. Это обычные объекты JavaScript/TypeScript с минимальным количеством шаблонного кода.

Экспорт по умолчанию (метаобъект)

Экспорт по умолчанию — это метаобъект. Как минимум он содержит title (путь в боковой панели) и документируемый component.

import Button from "./Button.vue"

export default {
  title: "Components/Button",
  component: Button,
}

title организует боковую панель

С помощью косых черт в title создаётся иерархия папок в боковой панели Storybook. Запись "Forms/Inputs/TextField" создаёт вложенность из трёх уровней.

export default {
  title: "Forms/Inputs/TextField",
  component: TextField,
}

Именованные экспорты — это истории

Каждый именованный экспорт — это вариант истории. Имя экспорта становится названием истории в боковой панели.

export const Primary = {}
export const Secondary = {}
export const Disabled = {}

Объект args

Объект args истории задаёт значения свойств. Storybook передаёт их компоненту, а панель управления позволяет менять их в реальном времени.

export const Primary = {
  args: {
    label: "Click me",
    variant: "primary",
  },
}

Несколько вариантов с помощью args

Повторно используйте один и тот же компонент в разных историях, изменяя только args. Каждый экспорт отображает компонент с другими свойствами.

export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }

Аргументы по умолчанию в метаобъекте

Поместите общие args в метаобъект, а отдельным историям оставьте только отличающиеся значения. Это позволяет не дублировать код в историях.

export default {
  component: Button,
  args: { label: "Button" }, // default for all stories
}

export const Disabled = { args: { disabled: true } }

Истории со слотами через render

Для содержимого слотов передайте функцию render, которая возвращает шаблон с использованием компонента. Это позволяет описывать случаи, которые невозможно выразить только с помощью args.

export const WithIcon = {
  render: (args) => ({
    components: { Button },
    setup() { return { args } },
    template: '<Button v-bind="args">⭐ Star</Button>',
  }),
}

Автоматическая генерация документации с помощью tags

Добавьте tags: ["autodocs"] в метаобъект, чтобы Storybook автоматически создал страницу документации компонента на основе его свойств и историй.

export default {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
}

Что создаёт autodocs

Страница autodocs перечисляет свойства компонента (имя, тип и значение по умолчанию), показывает каждую историю как интерактивный пример и отображает комментарии с описаниями — это постоянно актуальная спецификация без дополнительных файлов.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете создание историй.

Ответь в интерактивном уроке

Итоги

Вы научились создавать истории компонентов:

История описывает одно состояние компонента; в CSF3 используются экспорты-объекты.
Экспорт по умолчанию — это метаобъект с title (путём в боковой панели) и component.
Каждый именованный экспорт — вариант истории; args задаёт значения её свойств.
Общие args размещаются в метаобъекте, а истории переопределяют остальные значения. Для слотов используйте render.
tags: ["autodocs"] автоматически создаёт страницу документации.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Написание историй компонентов» бесплатный?

Да — полный текст урока «Написание историй компонентов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Написание историй компонентов»?

Формат CSF3, экспорт по умолчанию (title, component), именованные экспорты как истории и args Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Написание историй компонентов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка Storybook для Vue 3
Написание историй компонентов
Элементы управления, действия и аргументы
Дополнения Storybook и тестирование доступности

← Назад к Vue Academy