開始使用 Storybook

歡迎來到 Storybook 文件 ✦ 學習如何在你的專案中開始使用 Storybook。然後，探索 Storybook 的主要概念，並發現其他資源來幫助你成長和維護你的 Storybook。

什麼是 Storybook？

Storybook 是一個前端工作坊，用於獨立建構 UI 元件和頁面。它可以幫助你開發和分享難以觸及的狀態和邊緣案例，而無需運行你的整個應用程式。成千上萬的團隊使用它進行 UI 開發、測試和文件編寫。它是開源且免費的。

安裝 Storybook

Storybook 是一個獨立工具，與你的應用程式並行運行。它是一個零配置環境，適用於任何現代前端框架。你可以將 Storybook 安裝到現有專案中，或從頭開始建立一個新專案。

npm create storybook@latest

Next.js

React

搭配 Vite

React

搭配 Webpack

React Native Web

搭配 Vite (在瀏覽器中)

React Native

在裝置上

Preact

搭配 Vite

Vue

搭配 Vite

Vue

搭配 Webpack

Angular

SvelteKit

Svelte

搭配 Vite

Svelte

搭配 Webpack

Web Components

搭配 Vite

Web Components

搭配 Webpack

想了解更多關於安裝 Storybook 的資訊嗎？請查看安裝指南。

主要概念

Storybook 是一個強大的工具，可以幫助你處理 UI 開發工作流程的許多方面。以下是一些主要概念，可幫助你入門。

Stories

Story 捕捉了 UI 元件的渲染狀態。每個元件可以有多個 Story，其中每個 Story 描述了不同的元件狀態。

文件

Storybook 可以分析你的元件，以自動建立與你的 Story 並行的文件。這種自動文件編寫功能使你可以更輕鬆地建立 UI 函式庫使用指南、設計系統網站等等。

測試

Stories 是你的 UI 測試策略的實用起點。你已經將 Stories 作為 UI 開發的自然組成部分來編寫，因此測試這些 Stories 是一種低成本的方式，可以隨著時間推移防止 UI 錯誤。

分享

發佈你的 Storybook 可以讓你與他人分享你的工作。你也可以將你的 Stories 嵌入到 Notion 或 Figma 等地方。

其他資源

一旦你學習了基礎知識，請探索以下其他方法，以充分利用 Storybook。