Я постоянно слышал о Сборнике рассказов с React Ecosystem. Это обычное дело, когда разработчики и дизайнеры могут собираться вместе и сотрудничать, чтобы создавать сложные приложения на ходу. Это помогает хранить каждый компонент в одном месте и позволяет любому разработчику редактировать этот компонент, а также помогает им обогащать их. Это также руководство по жизненному стилю.

После такого шума о Storybook для React я решил попробовать новую Storybook, доступную для Vue.js. Итак, давайте установим и создадим простой компонент и посмотрим, насколько быстро мы разработаем приложение и насколько оно полезно.

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

Установка сборника рассказов

  1. Давайте использовать vue-cli для создания проекта vue.
  2. Перейти к проекту
  3. Теперь давайте добавим @ storybook / vue к зависимостям.
  4. После установки этой зависимости вам необходимо создать стартовый сценарий, описывающий конфигурацию сборника рассказов. Это можно сделать, создав папку .storybook в корневом каталоге, а затем создав в ней простую конфигурацию. Мы сделаем это следующим образом и помним, что мы создаем простую кнопку. Файл будет называться config.js. Это будет сделано в папке .storybook.
  5. В приведенном ниже коде вы можете видеть, что мы импортируем наш компонент кнопки.
  6. Затем зарегистрируйте наш компонент с определенным именем здесь my-button
  7. Затем загрузите истории из папки scr и затем спроецируйте их.
  8. Помните, что вам необходимо зарегистрировать каждый компонент в этой конкретной конфигурации, чтобы компоненты можно было создавать.
  • импортировать {configure} из «@ storybook / vue»; импортировать Vue из vue; // Импортируйте пользовательские компоненты. импортировать Mybutton из ‘../src/storybook/Button.vue’; // Регистрируем пользовательские компоненты. Vue.component («моя кнопка», Mybutton); function loadStories () {// Вы можете потребовать столько историй, сколько вам нужно. требуется (‘../ src / storybook’); } configure (loadStories, модуль);
  1. После этого мы продолжим и создадим папку под названием сборник рассказов внутри папки src. Здесь будет находиться весь наш код. Здесь, чтобы начать, нам нужно создать файл index.js. Это поможет нам в дальнейшей настройке сборника рассказов и поможет нам писать рассказы.
  2. Мы импортируем storiesOf из сборника рассказов, а затем используем его для создания наших новых историй.
  3. Эти новые истории будут видны в пользовательском интерфейсе, созданном фреймворком.
  • импортировать Vue из vue; импортировать {storiesOf} из ‘@ storybook / vue’; импортировать MyButton из ‘./Button.vue’; StoriesOf ('MyButton', module) .add ('story as a component', () = ›({components: {MyButton}, template: '‹ my-button: rounded = »true» ›rounded‹ / my-button ›'}));
  1. Теперь давайте создадим недостающий компонент Button, для которого мы написали историю. Компонент Button будет одним файлом, который будет служить нам для всего проекта.
  2. Здесь вы можете видеть, что код довольно прост, просто представляет сам компонент. Просто, но полезно.
  • ‹Template› ‹button class =” button ”› {{buttonName}} ‹/button› ‹/template› ‹script› module.exports = {data: function () {return {buttonName: 'Test Button'}}} ‹ / скрипт ›
  1. Последнее, что нужно сделать, это обновить сценарий выполнения в package.json. Это поможет нам запустить сборник рассказов вместе с конфигурацией сборника рассказов. Эта конфигурация будет прочитана при выполнении команды. Вы можете добавить этот единственный скрипт в раздел скриптов, и он будет работать безупречно.
  • «Scripts»: {«storybook»: «start-storybook -p 9001 -c .storybook»},
  1. Теперь давайте запустим сервер, используя указанную выше команду, и посмотрим, как работает вся книга рассказов.
  • npm run сборник рассказов

Вы сделали. Вы должны увидеть что-то вроде этого экрана, как показано ниже.

Приложение Vue.js Storybook Test

Заключение

Storybook может быть действительно продуктивным инструментом как для разработчиков, так и для дизайнеров, и мы будем выпускать больше руководств по настройке сборника рассказов вместе с его использованием с различными другими фреймворками, такими как React, Angular и т. Д. Оставайтесь с нами и подпишитесь на нас, чтобы получать последние обновления Vue.js.

ПРИМЕЧАНИЕ. ЕСЛИ вы еще не настроили рабочее пространство, вы всегда можете обратиться к этим руководствам, чтобы начать работу.

  1. Введение в Vue Framework?
  2. Начало работы с Vue с использованием Fiddle
  3. Узнайте, как быстро обрабатывать вводимые пользователем данные и привязки форм с помощью Vue
  4. Легко привязывать выделение и множественный выбор с помощью Vue
  5. Научитесь составлять список дел - создание компонентов Vue
  6. Список задач Vue с опцией удаления и глобальной шиной событий - Часть II
  7. Как создать глобальную шину событий с помощью Vue.js?
  8. Узнайте, как работать с вычисляемыми свойствами в VueJS
  9. Как использовать наблюдатели Vue.js для асинхронных обновлений?
  10. Создайте простой редактор HTML с помощью директивы Vuejs v-html
  11. Предотвратить XSS в Vue.js с помощью Google Caja
  12. Как работает обработка событий в Vue.js?

Изначально опубликовано в The Web Juice.