Histoire — Генерация документации для приложений Vue

Histoire — это инструмент для создания сюжетных (или «книжных») приложений.

Познакомиться с Histoire

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

Истории полезны по нескольким причинам:

Организовывать и документировать компоненты для других разработчиков
Представьте различные варианты использования ваших компонентов
Разработка компонентов в изоляции
Тестируйте визуальные регрессии, делая скриншоты
Обычно он используется при создании системы проектирования компании или библиотеки компонентов.

В Histoire истории содержат один или несколько вариантов, которые представляют собой различные варианты использования одной и той же темы или одних и тех же компонентов. Истории в Histoire строятся подобным образом:

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

Вы будете иметь:

В основном дает вам:

  • Интерактивный предварительный просмотр истории (или даже сетка всех вариантов!)
  • Копируемый код для воспроизведения того же результата в вашем собственном коде
  • Элементы управления для взаимодействия с предварительным просмотром
  • Рендеринг документации в формате Markdown
  • Много других возможностей!

Почему я должен использовать Histoire?

Histoire создан с нуля, чтобы быть родным конструктором историй Vite. Нашими основными ценностями при разработке Histoire являются:

Родные проекты Vite: Повторное использование настроек Vite позволяет тратить меньше времени на настройку и больше времени на написание историй. Один и тот же конвейер сборки означает отсутствие дублирования усилий и конфигурации! Встроенная поддержка TypeScript, JSX, стилей…

Idiomatic : Нет обязательного JSX-ориентированного и фанки синтаксиса шаблонов/args! Напишите свою историю естественно в .vuearfiles, .sveltearfiles, JSX или в любом другом формате, который будет сочетаться с фреймворком, который вы используете в остальной части вашего проекта. Мы также хотим, чтобы как можно меньше API Histoire просачивалось в ваш код истории.

Быстро и легко: развлекайтесь написанием историй, используя мгновенный запуск сервера Vite и мгновенный HMR! Книги, созданные с помощью Histoire, также будут быстро производиться благодаря разделению кода и компактным размерам пакетов.

Настраиваемый: Вы можете легко изменить внешний вид и функциональность в соответствии с вашим брендом или установить плагины для расширения возможностей Histoire.

Отличный пользовательский опыт: Мы заботимся о пользовательском опыте и стремимся сделать пользовательский интерфейс Histoire как можно более красивым и интуитивно понятным. Он поддерживает и телефоны!

Онлайн-демонстрация:

Ознакомьтесь с некоторыми демонстрациями из документаций Vue и Svelte:

https://histoire.dev/guide/

Учебное пособие: Создание документации проекта Vue

Я подготовил материал на youtube, обучающий использованию и настройке Histoire в ваших проектах Vue.js, посмотрите его:

Надеюсь, вам понравилось это содержание!
До скорой встречи!

Оцените статью
devanswers.ru
Добавить комментарий