Использование Quasar с Vue3 и Storybook

Это черновой вариант статьи, который может быть доработан позже

Создайте новый проект quasar. Установите quasar cli, если вы еще этого не сделали. Для этого примера мы используем вариант Vite.

Выберите Vue 3 и Vite вместо Webpack, чтобы следовать этому примеру.

$ yarn global add @quasar/cli
$ yarn create quasar

# or:

$ npm i -g @quasar/cli
$ npm init quasar
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Инициализируйте storybook

  • cd в директорию созданного вами проекта

Запустите npx sb init для инициализации storybook в вашем проекте.

Обновить package.json

Замените любую версию autoprefixer в вашем package.json для того, чтобы Storybook работал. Версия PostCSS, используемая Storybook, не будет работать с более поздними версиями autoprefixer. Более подробную информацию о причинах этого можно найти здесь.

Используйте это:

 "autoprefixer": "^9.0.0",
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Обновите настройки Storybook

Чтобы Storybook правильно загружал и отображал компоненты квазара, нам необходимо обновить наш файл .storybook/preview.js следующим образом:

import '@quasar/extras/roboto-font/roboto-font.css';
// These are optional
import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/animate/fadeInUp.css';
import '@quasar/extras/animate/fadeOutDown.css';
import '@quasar/extras/animate/fadeInRight.css';
import '@quasar/extras/animate/fadeOutRight.css';

// Loads the quasar styles and registers quasar functionality with storybook
import 'quasar/dist/quasar.css';
import { app } from '@storybook/vue3';
import { Quasar } from 'quasar';

// This is also where you would setup things such as pinia for storybook

app.use(Quasar, {});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Войти в полноэкранный режим Выйти из полноэкранного режима

Запустите storybook

Используйте yarn storybook для запуска storybook. По умолчанию он должен открыть ваш браузер на localhost:6006/.

Тестирование компонентов Quasar

Замените код в вашем src/stories/Button.vue на

<template>
  <q-btn color="primary">Something</q-btn>
</template>
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы должны увидеть кнопку квазара в storybook.

Заключение

Вот и все! Теперь вы можете начать использовать storybook с Vue3 + Vite + Quasar.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *