開始使用 Storybook

歡迎來到 Storybook 的文件 ✦ 瞭解如何在您的專案中開始使用 Storybook。然後，探索 Storybook 的主要概念並發掘其他資源，以協助您成長和維護您的 Storybook。

什麼是 Storybook？

Storybook 是一個前端工作坊，用於隔離建立 UI 元件和頁面。它可協助您開發和分享難以觸及的狀態和邊緣情況，而無需執行整個應用程式。數千個團隊將其用於 UI 開發、測試和文件。它是開放原始碼且免費的。

安裝 Storybook

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

npx storybook@latest init

Next.js

React

使用 Vite

React

使用 Webpack

React Native

Vue

使用 Vite

Vue

使用 Webpack

Angular

SvelteKit

Svelte

使用 Vite

Svelte

使用 Webpack

Web Components

使用 Vite

Web Components

使用 Webpack

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

主要概念

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

故事 (Stories)

故事捕捉 UI 元件的渲染狀態。每個元件可以有多個故事，每個故事描述不同的元件狀態。

文件 (Docs)

Storybook 可以分析您的元件，自動在您的故事旁建立文件。這種自動文件讓您更容易建立 UI 函式庫使用指南、設計系統網站等。

測試 (Testing)

故事是您 UI 測試策略的實用起點。您已經將撰寫故事作為 UI 開發的自然一部分，因此測試這些故事是一種低成本的方式，可防止 UI 錯誤隨著時間的推移而產生。

分享 (Sharing)

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

額外資源

在您學習了基本知識後，探索其他方式來充分利用 Storybook。