Storybook 7.0 Beta Vue3踩坑解决记录
更新时间：2023年02月01日 14:44:33 作者：65岁退休Coder
这篇文章主要为大家介绍了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即可。
注意：
- 不要尝试使用
--type vue3类似的指令创建对应的项目，大概率不会成功。 Storybook默认使用yarn作为包管理工具，如果想要切换执行指令时末尾增加--package-manager=pnpm
总结
目前来看经过上面一系列的摸索过后，本地测试，打包都没有什么问题，就看后续部署了。如果后续在使用过程中碰到其他问题也会持续在这里进行更新。
以上就是Storybook 7.0 Beta Vue3踩坑随笔的详细内容，更多关于Storybook 7.0 Beta Vue3的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于vue中实现打印功能的几种方法,打印功能在实际开发中非常常见,通常我们需要将网页中的某一部分或整个网页打印出来,需要的朋友可以参考下2023-09-09
Vue3-KeepAlive,多个页面使用keepalive方式
这篇文章主要介绍了Vue3-KeepAlive，多个页面使用keepalive方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由，渲染相应的404页面。这篇文章主要介绍了Vue单页及多页应用全局配置404页面实践,需要的朋友可以参考下2018-05-05
这篇文章主要给大家介绍了关于axios如何取消重复无用的请求的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格,下面这篇文章主要给大家介绍了关于Vscode关闭Eslint语法检查的多种方式,文章通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
如何在 Vue3 中使用 OpenLayers 实现事件 loadst
在这篇文章中,我将详细介绍如何在 Vue3 + OpenLayers 中监听 loadstart 和 loadend 事件,并通过 Vue3 Composition API 进行代码优化,使其更加高效、健壮,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了8个非常实用的Vue自定义指令，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
vue项目引入远程jweixin-1.2.0.js文件并使用详解
这篇文章主要介绍了vue项目引入远程jweixin-1.2.0.js文件并使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了vue-cli3.0项目打包后如何修改访问后端地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论