Это черновой вариант статьи, который может быть доработан позже
Создайте новый проект 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.