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