Я постоянно слышал о Сборнике рассказов с React Ecosystem. Это обычное дело, когда разработчики и дизайнеры могут собираться вместе и сотрудничать, чтобы создавать сложные приложения на ходу. Это помогает хранить каждый компонент в одном месте и позволяет любому разработчику редактировать этот компонент, а также помогает им обогащать их. Это также руководство по жизненному стилю.
После такого шума о Storybook для React я решил попробовать новую Storybook, доступную для Vue.js. Итак, давайте установим и создадим простой компонент и посмотрим, насколько быстро мы разработаем приложение и насколько оно полезно.
У нас есть видео, в котором документируется весь процесс установки и экспериментов, настраивая среду, в которой вы можете работать, или вы можете продолжить и следовать руководствам, приведенным ниже.
Установка сборника рассказов
- Давайте использовать vue-cli для создания проекта vue.
- Перейти к проекту
- Теперь давайте добавим @ storybook / vue к зависимостям.
- После установки этой зависимости вам необходимо создать стартовый сценарий, описывающий конфигурацию сборника рассказов. Это можно сделать, создав папку .storybook в корневом каталоге, а затем создав в ней простую конфигурацию. Мы сделаем это следующим образом и помним, что мы создаем простую кнопку. Файл будет называться config.js. Это будет сделано в папке .storybook.
- В приведенном ниже коде вы можете видеть, что мы импортируем наш компонент кнопки.
- Затем зарегистрируйте наш компонент с определенным именем здесь my-button
- Затем загрузите истории из папки scr и затем спроецируйте их.
- Помните, что вам необходимо зарегистрировать каждый компонент в этой конкретной конфигурации, чтобы компоненты можно было создавать.
- импортировать {configure} из «@ storybook / vue»; импортировать Vue из vue; // Импортируйте пользовательские компоненты. импортировать Mybutton из ‘../src/storybook/Button.vue’; // Регистрируем пользовательские компоненты. Vue.component («моя кнопка», Mybutton); function loadStories () {// Вы можете потребовать столько историй, сколько вам нужно. требуется (‘../ src / storybook’); } configure (loadStories, модуль);
- После этого мы продолжим и создадим папку под названием сборник рассказов внутри папки src. Здесь будет находиться весь наш код. Здесь, чтобы начать, нам нужно создать файл index.js. Это поможет нам в дальнейшей настройке сборника рассказов и поможет нам писать рассказы.
- Мы импортируем storiesOf из сборника рассказов, а затем используем его для создания наших новых историй.
- Эти новые истории будут видны в пользовательском интерфейсе, созданном фреймворком.
- импортировать 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 ›'}));
- Теперь давайте создадим недостающий компонент Button, для которого мы написали историю. Компонент Button будет одним файлом, который будет служить нам для всего проекта.
- Здесь вы можете видеть, что код довольно прост, просто представляет сам компонент. Просто, но полезно.
- ‹Template› ‹button class =” button ”› {{buttonName}} ‹/button› ‹/template› ‹script› module.exports = {data: function () {return {buttonName: 'Test Button'}}} ‹ / скрипт ›
- Последнее, что нужно сделать, это обновить сценарий выполнения в package.json. Это поможет нам запустить сборник рассказов вместе с конфигурацией сборника рассказов. Эта конфигурация будет прочитана при выполнении команды. Вы можете добавить этот единственный скрипт в раздел скриптов, и он будет работать безупречно.
- «Scripts»: {«storybook»: «start-storybook -p 9001 -c .storybook»},
- Теперь давайте запустим сервер, используя указанную выше команду, и посмотрим, как работает вся книга рассказов.
- npm run сборник рассказов
Вы сделали. Вы должны увидеть что-то вроде этого экрана, как показано ниже.
Приложение Vue.js Storybook Test
Заключение
Storybook может быть действительно продуктивным инструментом как для разработчиков, так и для дизайнеров, и мы будем выпускать больше руководств по настройке сборника рассказов вместе с его использованием с различными другими фреймворками, такими как React, Angular и т. Д. Оставайтесь с нами и подпишитесь на нас, чтобы получать последние обновления Vue.js.
ПРИМЕЧАНИЕ. ЕСЛИ вы еще не настроили рабочее пространство, вы всегда можете обратиться к этим руководствам, чтобы начать работу.
- Введение в Vue Framework?
- Начало работы с Vue с использованием Fiddle
- Узнайте, как быстро обрабатывать вводимые пользователем данные и привязки форм с помощью Vue
- Легко привязывать выделение и множественный выбор с помощью Vue
- Научитесь составлять список дел - создание компонентов Vue
- Список задач Vue с опцией удаления и глобальной шиной событий - Часть II
- Как создать глобальную шину событий с помощью Vue.js?
- Узнайте, как работать с вычисляемыми свойствами в VueJS
- Как использовать наблюдатели Vue.js для асинхронных обновлений?
- Создайте простой редактор HTML с помощью директивы Vuejs v-html
- Предотвратить XSS в Vue.js с помощью Google Caja
- Как работает обработка событий в Vue.js?
Изначально опубликовано в The Web Juice.