Vue 3 故事书

Question

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

我相信这是因为 Vue 版本是 @vue/cli 4.5.11 当我运行 “vue -V” & Storybook 是 6.1.17 当我运行 “开始故事书-V

我不明白这是怎么回事。我在 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"
  }
}

Answer 1

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

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

vue add vue-next

之后确保升级 Storybook：

npx sb@next init

您可以通过 Storybook 查看 blog post 关于 Vue 3 集成的内容。

Vue 3 故事书

Vue 3 Storybook

vue.js

storybook