为 Quasar v2 配置 Storybook

Question

我目前很难尝试为 Quasar v2（使用 Vue 3）配置 Storybook。

\n

这是我的依赖项package.json：

\n

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

\n

这.storybook/main.js：

\n

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

\n

这.storybook/preview.js：

\n

import { createApp } from \'vue\';\nimport Vuex from \'vuex\';\nimport Quasar from \'quasar\'; //  Quasar is undefined in a console.log\n\n// helper for quasar start\nconst qAppEl = document.createElement(\'div\');\n\nqAppEl.setAttribute(\'id\', \'q-app\');\ndocument.getElementsByTagName(\'body\')[0].appendChild(qAppEl);\n\nconst app = createApp({})\napp.use(Vuex);\napp.use(Quasar, { config: {}, directives: {} });\napp.mount(\'#q-app\')\n

\n

和测试故事EssentialLink.stories.js：

\n

import EssentialLink from \'./EssentialLink.vue\'\n\nexport default {\n  title: \'StoryTest\'\n}\n\nexport const essentialLink = () => ({\n  components: { EssentialLink },\n  template: `<essential-link\n    :title="A title"\n  />`\n})\n

\n

我收到两个错误：

\n

\n
• SyntaxError: 在EssentialLink.stories.jsprop 标题行的属性列表后面缺少 }
\n
• [Vue warn]：插件必须是一个函数或具有“安装”函数的对象。（Quasar 导入在文件中未定义.storybook/preview.js）
\n

\n

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$/,
    },
  },
}

如果有更多示例代码，请参考此存储库