Vue Academy · 课时

为 Vue 3 配置 Storybook

npx storybook@latest init、.storybook/config、main.js、stories 目录，以及运行 Storybook

为 Vue 3 配置 Storybook 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 Storybook

Storybook 是一个用于独立构建 UI 组件的工作台。您可以在应用之外渲染组件的各种状态，为其编写文档并进行视觉测试——这一切都在专用的浏览器沙盒中完成。

为什么在 Vue 中使用它

在深层页面中开发按钮或模态框的效率很低。Storybook 让您可以单独查看组件，实时切换其属性，并在视觉回归进入应用之前发现它们。

一条命令完成安装

在现有的 Vue 3 项目中运行初始化命令。它会检测 Vite、安装依赖，并搭建配置和示例故事。

// terminal
// npx storybook@latest init

init 创建的内容

初始化程序会添加一个 .storybook/ 配置文件夹、示例 *.stories.* 文件和 npm 脚本。它会自动检测 Vue 3 + Vite 设置。

// .storybook/main.ts
// .storybook/preview.ts
// src/stories/*.stories.ts (examples)

main.ts 配置

.storybook/main.ts 是核心配置文件：它指定故事所在位置、要加载的插件，以及要使用的框架。对于 Vue 3 + Vite，框架是 @storybook/vue3-vite。

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite"

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|ts)"],
  addons: ["@storybook/addon-essentials"],
  framework: { name: "@storybook/vue3-vite", options: {} },
}
export default config

stories 文件匹配模式

stories 数组使用文件匹配模式告诉 Storybook 在哪里查找故事文件。请根据您的文件夹布局进行调整。

stories: [
  "../src/**/*.stories.@(js|jsx|ts|tsx)",
]

vue3-vite 框架

该框架包会将 Storybook 接入您现有的 Vite 配置，因此别名、插件和 CSS 处理方式都与实际应用的构建过程保持一致。

framework: {
  name: "@storybook/vue3-vite",
  options: {},
}

preview.ts 文件

.storybook/preview.ts 用于配置应用于每个故事的全局设置：全局装饰器、参数以及全局 CSS 的导入。

// .storybook/preview.ts
import type { Preview } from "@storybook/vue3"
import "../src/assets/main.css"

const preview: Preview = {
  parameters: {
    controls: { matchers: { color: /color/i } },
  },
}
export default preview

全局装饰器和插件

如果组件需要路由器或 Pinia，请通过 setup 在 preview.ts 中注册一次，这样每个故事都能访问它们，无需为每个故事重复编写样板代码。

// .storybook/preview.ts
import { setup } from "@storybook/vue3"
import { createPinia } from "pinia"

setup((app) => {
  app.use(createPinia())
})

运行开发服务器

使用开发命令在本地启动 Storybook。约定使用的端口是 6006。

// terminal
// npm run storybook
// or directly:
// storybook dev -p 6006

构建静态 Storybook

部署时，请构建一个可以托管在任意位置的静态网站。持续集成流程通常会发布该网站供设计评审。

// terminal
// storybook build
// outputs to storybook-static/

快速检查

检查您对 Vue 3 Storybook 设置的理解。

回顾

您为 Vue 3 设置了 Storybook：

Storybook 在隔离环境中构建组件并为其编写文档。
npx storybook@latest init 会搭建配置和示例。
.storybook/main.ts 设置 stories 文件匹配模式、插件以及 @storybook/vue3-vite 框架。
.storybook/preview.ts 处理全局设置（CSS、装饰器以及 Pinia 等插件）。
使用 storybook dev -p 6006 运行；使用 storybook build 构建静态网站。

常见问题解答

「为 Vue 3 配置 Storybook」课时是免费的吗？

是的 — 「为 Vue 3 配置 Storybook」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「为 Vue 3 配置 Storybook」这节课中我会学到什么？

npx storybook@latest init、.storybook/config、main.js、stories 目录，以及运行 Storybook 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「为 Vue 3 配置 Storybook」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy