vuejs3 - 为 Quasar v2 配置故事书

Question

我目前很难为 Quasar v2(使用 Vue 3)配置 Storybook。

这里是我在 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 warn]: 插件必须是函数或具有“安装”功能的对象。 (Quasar 导入在文件 .storybook/preview.js 中未定义)

Answer 1

您可能已经解决了它。

Storybook 使用自己的 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$/,
    },
  },
}

更多样例代码，引用this repo