目录故事背景坑一:坑二:坑三:总结故事背景 基于 Vue + Vite + TS 结合 pnpm 的一个 monorepo 项目的组件库文档编写,起初个人是比较倾向于直接使用全家桶
基于 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
即可。注意:
--type vue3
类似的指令创建对应的项目,大概率不会成功。Storybook
默认使用 yarn
作为包管理工具,如果想要切换执行指令时末尾增加 --package-manager=pnpm
目前来看经过上面一系列的摸索过后,本地测试,打包都没有什么问题,就看后续部署了。如果后续在使用过程中碰到其他问题也会持续在这里进行更新。
以上就是Storybook 7.0 Beta Vue3踩坑随笔的详细内容,更多关于Storybook 7.0 Beta Vue3的资料请关注编程网其它相关文章!
--结束END--
本文标题: Storybook 7.0 Beta Vue3踩坑解决记录
本文链接: https://www.lsjlt.com/news/193861.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0