Vue 3 故事书

Posted 2023-02-19

【中文标题】Vue 3 故事书

【英文标题】：Vue 3 Storybook

【发布时间】：2021-06-06 05:16:05

【问题描述】：

我已成功安装 Storybook for Vue，但它似乎不能很好地处理 Vue 3 组件。

我相信这是因为当我运行“vue -V”时，Vue 版本是 @vue/cli 4.5.11，而当我运行“start-storybook -V”时，Storybook 是 6.1.17

我不明白这是如何工作的。我在 Vue 3 上吗？如何让 Storybook 了解我的 Vue 3 组件？

这是我的 package.json 文件：

  "name": "component-library",
  "version": "0.1.0",
  "private": true,
  "description": "Component Library",
  "repository": 
    "type": "git",
    "url": ""
  ,
  "license": "MIT",
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  ,
  "dependencies": 
    "@storybook/theming": "^6.1.18",
    "@vue/composition-api": "^1.0.0-rc.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  ,
  "devDependencies": 
    "@babel/core": "^7.12.10",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/addons": "^6.1.18",
    "@storybook/vue": "^6.1.11",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11"
  

【问题讨论】：

你不在 Vue 3 上！您当前的版本是 2.6.11。你应该升级你的 Vue 版本。 Storybook 将与 Vue 3 一起使用。

感谢您的回答。你知道怎么做吗？我一直在寻找几个小时.. 我使用 npm，而不是 yarn

您可以查看official migration guide

【参考方案1】：

现在，您使用的是 Vue 版本 2.6.11，它不是 Vue 3。

您可以使用 Vue CLI 命令轻松升级您的项目：

vue add vue-next

之后确保升级 Storybook：

npx sb@next init

您可以查看 Storybook 的 blog post 关于 Vue 3 集成的信息。