0Pricing
Vue Academy · Урок

Настройка Storybook для Vue 3

npx storybook@latest init, .storybook/config, main.js, каталог историй и запуск

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

Что такое Storybook

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

Зачем использовать его с Vue

Разработка кнопки или модального окна внутри глубоко вложенной страницы занимает много времени. Storybook позволяет увидеть компонент отдельно, менять его свойства в реальном времени и обнаруживать визуальные регрессии ещё до того, как они попадут в приложение.

Установка одной командой

Запустите команду инициализации в существующем проекте Vue 3. Она обнаружит Vite, установит зависимости и создаст конфигурацию и примеры историй.

// terminal
// npx storybook@latest init

Что создаёт инициализация

Инициализатор добавляет папку конфигурации .storybook/, примеры файлов *.stories.* и скрипты npm. Он автоматически обнаруживает конфигурацию Vue 3 + Vite.

// .storybook/main.ts
// .storybook/preview.ts
// src/stories/*.stories.ts (examples)

Конфигурация main.ts

.storybook/main.ts — это основная конфигурация: здесь указывается, где находятся истории, какие дополнения загружать и какой фреймворк использовать. Для Vue 3 + Vite фреймворком служит @storybook/vue3-vite.

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite"

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|ts)"],
  addons: ["@storybook/addon-essentials"],
  framework: { name: "@storybook/vue3-vite", options: {} },
}
export default config

Шаблон поиска историй

Массив stories указывает Storybook, где искать файлы историй, с помощью шаблонов поиска. Настройте его в соответствии со структурой папок Вашего проекта.

stories: [
  "../src/**/*.stories.@(js|jsx|ts|tsx)",
]

Фреймворк vue3-vite

Пакет фреймворка подключает Storybook к существующей конфигурации Vite, поэтому псевдонимы, плагины и обработка CSS соответствуют сборке Вашего реального приложения.

framework: {
  name: "@storybook/vue3-vite",
  options: {},
}

Файл preview.ts

.storybook/preview.ts настраивает глобальные параметры, применяемые к каждой истории: глобальные декораторы, параметры и импорт глобального CSS.

// .storybook/preview.ts
import type { Preview } from "@storybook/vue3"
import "../src/assets/main.css"

const preview: Preview = {
  parameters: {
    controls: { matchers: { color: /color/i } },
  },
}
export default preview

Глобальные декораторы и плагины

Если компонентам нужны маршрутизатор или Pinia, зарегистрируйте их один раз в preview.ts через setup, чтобы каждая история имела к ним доступ — без повторяющегося кода для каждой истории.

// .storybook/preview.ts
import { setup } from "@storybook/vue3"
import { createPinia } from "pinia"

setup((app) => {
  app.use(createPinia())
})

Запуск сервера разработки

Запустите Storybook локально командой для разработки. Стандартно используется порт 6006.

// terminal
// npm run storybook
// or directly:
// storybook dev -p 6006

Сборка статического Storybook

Для развёртывания соберите статический сайт, который можно разместить где угодно. В CI его часто публикуют для проверки дизайна.

// terminal
// storybook build
// outputs to storybook-static/

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

Проверьте, насколько хорошо Вы понимаете настройку Storybook для Vue 3.

Итоги

Вы настроили Storybook для Vue 3:

  • Storybook изолированно собирает компоненты и создаёт их документацию.
  • npx storybook@latest init создаёт конфигурацию и примеры.
  • .storybook/main.ts задаёт шаблон поиска stories, дополнения и фреймворк @storybook/vue3-vite.
  • .storybook/preview.ts отвечает за глобальную настройку (CSS, декораторы и плагины, например Pinia).
  • Запускайте Storybook командой storybook dev -p 6006, а статический сайт собирайте командой storybook build.

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

Урок «Настройка Storybook для Vue 3» бесплатный?

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

Чему я научусь в уроке «Настройка Storybook для Vue 3»?

npx storybook@latest init, .storybook/config, main.js, каталог историй и запуск Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Настройка Storybook для Vue 3»?

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

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

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

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

  1. Настройка Storybook для Vue 3
  2. Написание историй компонентов
  3. Элементы управления, действия и аргументы
  4. Дополнения Storybook и тестирование доступности
← Назад к Vue Academy