Storybook 7.0 Beta Vue3踩坑随笔

故事背景

基于 Vue + Vite + TS 结合 pnpm 的一个 monorepo 项目的组件库文档编写，起初个人是比较倾向于直接使用全家桶系列的 VitePress。无奈公司中其他库文档均使用 Storybook，并且已经升级到最新版本。

好吧，到这里就基本知道了自己要做什么了。

开始

由于之前也没有接触过这个玩意儿，就去看着官网一步步操作去了。坑也就在这里了，谁知道版本上去了，文档却没有做出相应的调整。然后就有了后续一系列的问题。Storybook 7.0 下载

坑一：不要按照官网的下载指令一步步操作，因为这样最终会下载 6.5 稳定版

# 错误安装方式
npx storybook init
npx sb init
# 正确安装方式
npx storybook@next init 
npx sb@next init

坑二：不要查找 vite 的创建项目方式，使用一些不明所以的命令。Storybook 会根据你项目技术栈创建出对应的脚手架

# 错误命令
npx sb init --builder @storybook/builder-vite
npx storybook init --builder vite

坑三：7.0 的版本不要在 monorepo 的项目中创建除非是在根目录

 ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.
An error occurred while installing dependencies.

 ERROR  Command failed with exit code 1: /Users/a1234/Library/pnpm/store/v3/tmp/dlx-36847/node_modules/.bin/storybook init --package-manager=pnpm

so 我的解决方案就是创建一个 vite 的项目，然后在这个项目中去初始化 Storybook 然后将相关的命令、文件夹及 devDependencies 中相关的包全部 cv 到对应的子项目中重新下载依赖即可使用。

具体操作如下：

• pnpm create vite myApp --template vue-ts 创建 vite 项目，随后安装依赖。
• pnpx storybook@next init --package-manager=pnpm
• 将 package.json 中关于 Storybook 的内容进行 cv，包括 scripts 中的两条指令，devDependencies 中的一些包，项目中的两个目录。
• 复制到对应的 monorepo 的子项目中，删除子项目原有的 node_modeules 重新执行 pnpm install 即可。

坑四：做完以上操作后，.vue 文件中模板的 class 类名 jsx 错误，要求你使用 className 而不是 class

问题 issue 问题大致就是模板类型检查错误导致的（@vue/runtime-dom）解决方案及具体原因解决方案内都有相关介绍。

坑五： Storybook 对于 vue 的支持其实不算太好，遇到插槽的组件真的是头疼。具体可以看这个 issue。

注意：

• 不要尝试使用 --type vue3 类似的指令创建对应的项目，大概率不会成功。
• Storybook 默认使用 yarn 作为包管理工具，如果想要切换执行指令时末尾增加 --package-manager=pnpm

总结

目前来看经过上面一系列的摸索过后，本地测试，打包都没有什么问题，就看后续部署了。如果后续在使用过程中碰到其他问题也会持续在这里进行更新。