Vue CLI 插件 Storybook 安装与使用指南

Vue CLI 插件 Storybook 安装与使用指南

一、项目目录结构及介绍

Vue CLI 插件Storybook的仓库位于GitHub，它旨在简化Vue应用程序的Storybook集成过程。虽然仓库本身不直接展示最终应用的目录结构，但安装此插件后，会在你的Vue项目中创建特定于Storybook的结构。典型的集成后项目目录结构可能包括以下部分：

• .storybook：这是存放所有Storybook相关配置的地方。

  • config.js 或 main.js：主配置文件，用于设置Storybook的行为和特性。
  • addons.js（可选）：用于注册Storybook的额外插件或添加剂。
  • preview.js：预览阶段配置，可以在这里进行组件渲染前的全局设定。

• stories：存放所有故事(stories)的目录，每个.stories.vue文件代表一个或多个组件的故事场景。

• src/components（或你的组件目录）：实际的Vue组件，这些组件会被引入到故事文件中。

二、项目的启动文件介绍

在安装了Vue CLI插件Storybook之后，主要的启动控制并不直接体现在单个文件中，而是通过命令行执行npm run storybook或yarn storybook来激活。该命令由Vue CLI服务管理，并调用.storybook/main.js中的配置来启动Storybook服务器。在.storybook/main.js中，你可以定义入口点、配置预处理器、添加第三方插件等，从而定制化启动行为。

三、项目的配置文件介绍

.storybook/main.js

这个文件是Storybook的核心配置文件，其基本结构如下示例：

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app'
    // 根据需要添加其他addons
  ],
  // 可以添加更多配置项如webpack、presets等
};

• stories: 指定故事文件的路径模式，Storybook将会扫描这些路径下符合模式的文件来加载故事。

• addons: 配置使用的Storybook插件列表，这些插件增强了Storybook的功能，比如链接、注释、样式检查等。

• 其他配置: 如有需要，还可以定义自定义的webpack配置、预设(presets)以及其他高级选项，使Storybook更加贴合你的项目需求。

通过上述三个核心部分的配置和理解，你可以有效管理和运行Vue项目中的Storybook环境，便于组件的开发、测试和文档化。