[!info] related notes storybook-module-federation-config

storybook

开始使用 Storybook | Storybook 文档 - Storybook 中文

Overview

1. 核心定位：组件化开发的“沙盒”

在开发桌面端应用（如使用 Electron 或 Tauri）时，运行整个程序可能很慢。Storybook 提供了一个独立运行的 Web 界面，你可以在里面逐个编写你的按钮、输入框、导航栏。

• 隔离开发： 即使你的后端接口没写好，或者主页面还没构思完，你也可以先在 Storybook 里把一个个精致的组件磨出来。
• 可视化文档： 它能自动根据你的代码生成一套交互式文档，方便你以后查看每个组件长什么样、怎么用。

---

2. 为什么它符合你的“桌面端美学”需求？

• 设计系统驱动（Design Systems）： 很多大厂（如 Shopify, Microsoft）的桌面端设计规范都是用 Storybook 承载的。它能帮你强迫自己保持 UI 的一致性。
• 实时交互（Controls）： 在 Storybook 界面右侧，你可以通过开关、拖拽滑块直接修改组件的属性（比如改个颜色、换个图标），实时看到组件在桌面端的表现，非常直观。
• 深色模式支持： 它可以轻松切换 Light/Dark Mode，这对于追求质感的桌面应用开发来说是刚需。

---

3. Storybook 的工作原理

它通过编写 .stories.tsx（或 .js）文件来定义。

$$ \text{Story} = \text{Component} + \text{Specific State/Props} $$

例如，你可以为一个按钮组件定义三个状态：

1. Primary（主按钮）： 大方、醒目。
2. Ghost（幽灵按钮）： 简洁、透明。
3. Loading（加载中）： 丝滑的动画。

---

4. 关键特性

• 多框架支持： 完美支持 React, Vue, Angular, Svelte 等，甚至支持纯 HTML/CSS。
• Addons (插件生态)：
  • Actions： 点击按钮时在后台打印日志。
  • Viewport： 模拟不同尺寸的桌面窗口或移动端屏幕。
  • Accessibility： 检查你的组件是否符合残障人士访问标准（大厂必备）。
• 自动化测试： 可以配合进行交互测试或视觉回归测试（防止你改了一个 CSS 导致其他地方 UI 崩了）。

---

5. 你的开发场景：配合 @dailyuse/* 别名

你之前提到在配置别名，在 Storybook 中，你同样需要配置 main.js 或 vite.config.ts 来识别这些别名。

避坑指南： > 因为 Storybook 有自己的构建环境（通常是 Webpack 或 Vite），所以即使你的主项目配置好了别名，Storybook 也要单独配置一下，否则它会找不到路径。

---

6. 总结：为什么要用它？

1. 提升审美： 专注单个组件时，你会更在意细节（阴影、边距、圆角）。
2. 效率翻倍： 避免了为了改一个弹窗样式，而反复在主程序里点开弹窗的痛苦。
3. 大方展示： 如果你的项目是开源或团队协作，Storybook 就是你最好的“说明书”。

Core Concept

• storybook-stories
• Docs
• Testing
• Sharing

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC