快捷導(dǎo)航

Storybook?7.0?Beta?Vue3踩坑解決記錄

更新時間：2023年02月01日 14:44:33 作者：65歲退休Coder

這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

故事背景

基于 Vue + Vite + TS 結(jié)合 pnpm 的一個 monorepo 項目的組件庫文檔編寫，起初個人是比較傾向于直接使用全家桶系列的 VitePress。無奈公司中其他庫文檔均使用 Storybook，并且已經(jīng)升級到最新版本。

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

由于之前也沒有接觸過這個玩意兒，就去看著官網(wǎng)一步步操作去了?？右簿驮谶@里了，誰知道版本上去了，文檔卻沒有做出相應(yīng)的調(diào)整。然后就有了后續(xù)一系列的問題。Storybook 7.0 下載

坑一：

不要按照官網(wǎng)的下載指令一步步操作，因為這樣最終會下載 6.5 穩(wěn)定版

# 錯誤安裝方式
npx storybook init
npx sb init
# 正確安裝方式
npx storybook@next init 
npx sb@next init

坑二：

不要查找 vite 的創(chuàng)建項目方式，使用一些不明所以的命令。Storybook 會根據(jù)你項目技術(shù)棧創(chuàng)建出對應(yīng)的腳手架

# 錯誤命令
npx sb init --builder @storybook/builder-vite
npx storybook init --builder vite

坑三：

7.0 的版本不要在 monorepo 的項目中創(chuàng)建除非是在根目錄

?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 我的解決方案就是創(chuàng)建一個 vite 的項目，然后在這個項目中去初始化 Storybook 然后將相關(guān)的命令、文件夾及 devDependencies 中相關(guān)的包全部 cv 到對應(yīng)的子項目中重新下載依賴即可使用。

具體操作如下：

pnpm create vite myApp --template vue-ts 創(chuàng)建 vite 項目，隨后安裝依賴。
pnpx storybook@next init --package-manager=pnpm
將 package.json 中關(guān)于 Storybook 的內(nèi)容進行 cv，包括 scripts 中的兩條指令，devDependencies 中的一些包，項目中的兩個目錄。
復(fù)制到對應(yīng)的 monorepo 的子項目中，刪除子項目原有的 node_modeules 重新執(zhí)行 pnpm install 即可。