Блог

В настоящее время мне трудно настроить Storybook для Quasar v2 (с Vue 3).

Здесь мои зависимости в package.json :

 "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^2.0.0-beta.1",
    "vue-i18n": "^9.0.0-beta.0"
},
"devDependencies": {
    "@babel/core": "^7.13.14",
    "@quasar/app": "^3.0.0-beta.1",
    "@storybook/addon-actions": "^6.2.1",
    "@storybook/addon-essentials": "^6.2.1",
    "@storybook/addon-links": "^6.2.1",
    "@storybook/vue3": "^6.2.1", # ✅ storybook for vue3
    "@types/node": "^10.17.15",
    "@typescript-eslint/eslint-plugin": "^4.16.1",
    "@typescript-eslint/parser": "^4.16.1",
    "babel-loader": "^8.2.2",
    "prettier": "^2.2.1",
    "vue-loader": "^16.2.0" # ✅ the specific vue loader needed
    "babel-eslint": "^10.0.1",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^7.0.0"
}
 

В .storybook/main.js :

 module.exports = {
  // the path may be precised for performance
  stories: [
    '../packages/**/components/*.stories.@(js|ts)'
  ],
  addons: ['@storybook/addon-essentials'],
}
 

В .storybook/preview.js :

 import { createApp } from 'vue';
import Vuex from 'vuex';
import Quasar from 'quasar'; // 🚩 Quasar is undefined in a console.log

// helper for quasar start
const qAppEl = document.createElement('div');

qAppEl.setAttribute('id', 'q-app');
document.getElementsByTagName('body')[0].appendChild(qAppEl);

const app = createApp({})
app.use(Vuex);
app.use(Quasar, { config: {}, directives: {} });
app.mount('#q-app')
 

и тестовая история EssentialLink.stories.js :

 import EssentialLink from './EssentialLink.vue'

export default {
  title: 'StoryTest'
}

export const essentialLink = () => ({
  components: { EssentialLink },
  template: `<essential-link
    :title="A title"
  />`
})
 

Я получаю две ошибки:

• SyntaxError: отсутствует } после списка свойств EssentialLink.stories.js в строке заголовка реквизита
• [Предупреждение Vue]: Плагин должен быть либо функцией, либо объектом с функцией «установить». (Импорт квазара не определен в файле .storybook/preview.js )

Возможно, вы уже решили эту проблему.

Сборник рассказов использует свой собственный экземпляр Vue. Поэтому @storybook/vue3 необходим импорт.

./storybook/preview.js

 import '@quasar/extras/roboto-font/roboto-font.css'
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'

import 'quasar/dist/quasar.css'
import { app } from '@storybook/vue3'
import { Quasar } from 'quasar'

app.use(Quasar, {})

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

 

Если есть еще примеры кода, обратитесь к этому репозиторию