Storybook 上手指南三分鐘搭出你的組件工作臺(tái)【免費(fèi)下載鏈接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation項(xiàng)目地址: https://gitcode.com/GitHub_Trending/st/storybook改一個(gè)按鈕卻要先啟動(dòng)整個(gè)應(yīng)用才能看到效果Storybook 是一個(gè) UI 組件開發(fā)工具把任意組件放進(jìn)獨(dú)立環(huán)境里查看、調(diào)整并自動(dòng)整理出組件文檔。不用搭業(yè)務(wù)頁面就能看到組件本身的效果。為什么改一個(gè)組件這么費(fèi)勁如果你遇到過看一個(gè)小組件要先把整個(gè)應(yīng)用跑起來通常是三件事在拖慢你。一是環(huán)境搭建。組件所在的頁面依賴登錄態(tài)、接口數(shù)據(jù)、路由配環(huán)境的時(shí)間比改組件本身還長。二是狀態(tài)觸發(fā)不了。錯(cuò)誤態(tài)、空數(shù)據(jù)態(tài)、加載態(tài)往往要等一個(gè)很難湊齊的條件出現(xiàn)才能看到它們長什么樣。三是文檔跟不上代碼。wiki 里寫著組件的參數(shù)三個(gè)月后沒人說得清還對(duì)不對(duì)。Storybook 的思路是組件隔離給每個(gè)組件一個(gè)獨(dú)立頁面頁面里渲染這個(gè)組件的某個(gè)具體狀態(tài)參數(shù)一變化就立刻刷新。這個(gè)頁面就叫 Story。 三分鐘跑通第一個(gè) Story從敲命令到打開頁面大約三分鐘。在項(xiàng)目根目錄執(zhí)行npx storybooklatest init它會(huì)自動(dòng)識(shí)別你用的框架并生成配置。裝完后啟動(dòng)開發(fā)服務(wù)器npm run storybook瀏覽器會(huì)打開 http://localhost:6006。左邊是組件列表中間是組件的渲染結(jié)果。同時(shí)它會(huì)生成兩類文件.storybook/目錄存配置組件旁邊的.stories.tsx文件用來定義 Story。一個(gè) Story 對(duì)應(yīng)組件的一種狀態(tài)。 裝完之后最常用的三件事功能不少但日常用得最多的是三個(gè)調(diào)屬性、看自動(dòng)文檔、切響應(yīng)式尺寸。用 Controls 面板實(shí)時(shí)調(diào)屬性把組件的參數(shù)寫成 args右側(cè)就會(huì)出現(xiàn) Controls 面板。改文字、換顏色、開關(guān)布爾值組件實(shí)時(shí)刷新不用改代碼、不用重新加載。export const Primary { args: { text: Hello }, };設(shè)計(jì)評(píng)審時(shí)尤其好用。設(shè)計(jì)師說字號(hào)調(diào)小一點(diǎn)你當(dāng)場(chǎng)在面板里調(diào)給他看確認(rèn)后再把值抄回代碼。讓組件文檔不再過期切到 Docs 標(biāo)簽頁每個(gè)組件會(huì)自動(dòng)有一篇文檔頁描述、全部參數(shù)的名稱、類型、默認(rèn)值旁邊跟著實(shí)時(shí)預(yù)覽。關(guān)鍵在于文檔不是手寫的它由組件代碼和 Story 定義生成。代碼改了文檔跟著變自然不會(huì)過期。想寫更完整的設(shè)計(jì)系統(tǒng)文檔可以用 MDX 寫整頁內(nèi)容倉庫的docs/目錄里有不少官方示例可參考。切設(shè)備尺寸看響應(yīng)式效果Viewport 插件內(nèi)置了常見設(shè)備的尺寸點(diǎn)一下就能在 iPhone 和 iPad 之間切換組件在不同屏幕下的布局一眼看到不用每次都去開瀏覽器的設(shè)備模擬。適合誰不適合誰在維護(hù)組件庫或設(shè)計(jì)系統(tǒng)基本必裝。所有組件各有頁面新人入職時(shí)打開頁面就知道怎么用不用翻代碼。一個(gè)人開發(fā)、但有一批復(fù)用組件也值得上。把它當(dāng)組件的活說明書。項(xiàng)目只是一次性的小頁面或者純后端就不必引入。它會(huì)多出一套構(gòu)建配置對(duì)小項(xiàng)目是負(fù)擔(dān)。另外注意Storybook 不是測(cè)試框架。它負(fù)責(zé)把組件展示和文檔化測(cè)試可以寫在旁邊但不是它的主業(yè)。? 幾個(gè)常被問到的問題會(huì)不會(huì)和我的構(gòu)建配置沖突不會(huì)。它有自己獨(dú)立的構(gòu)建配置不改動(dòng)應(yīng)用的構(gòu)建兩者在同一倉庫共存。必須學(xué) MDX 嗎不必須。用幾行 TS/TSX 就能寫出 StoryControls 和 Docs 頁面照?？捎谩Ｄ芊窒斫o團(tuán)隊(duì)嗎可以。把 Storybook 的構(gòu)建產(chǎn)物部署到任何靜態(tài)托管上把地址發(fā)出去大家看到的就是同一份組件庫。不用 React 行不行React、Vue、Angular、Svelte、Web Components 都支持init 會(huì)自動(dòng)檢測(cè)。從這里開始不用讀完所有資料再?zèng)Q定。在你自己的項(xiàng)目里先跑一條npx storybooklatest init看看生成的 Story 頁面體驗(yàn)順了再往下寫——每多寫一個(gè) Story就多一份不會(huì)過期的組件文檔?！久赓M(fèi)下載鏈接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation項(xiàng)目地址: https://gitcode.com/GitHub_Trending/st/storybook創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考