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