Vue 3故事书

Question

我已经成功地安装了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"
  }
}

​

Answer 1

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

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

vue add vue-next

在那之后，一定要升级Storybook：

npx sb@next init

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