How do you add a description text in Storybook for Vue?

在使用 Storybook 来编写 Vue 组件的文档时，添加组件描述是一个非常有用的功能，它能帮助开发者和设计师更好地理解组件的用途和功能。以下是如何在 Vue 组件的 Storybook 中添加组件描述的步骤：

步骤 1: 安装必要的插件

首先，确保你已经安装了 @storybook/addon-docs，这个插件能让你使用 Markdown 或 JSDoc 注释来添加文档描述。

bash
npm install @storybook/addon-docs --save-dev

步骤 2: 配置 Storybook

在你的 .storybook/main.js 配置文件中，添加 addon-docs 到你的插件列表中：

javascript
module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-docs'
  ],
};

步骤 3: 编写组件和 Story

你可以直接在你的 Vue 组件文件或者 Story 文件中使用 JSDoc 注释来添加组件描述。

示例 Vue 组件 (Button.vue):

vue
<template>
  <button>{{ label }}</button>
</template>

<script>
/**
 * 这是一个基本的按钮组件，用于执行简单的点击操作。
 *
 * @component
 * @example <Button label="点击我" />
 */
export default {
  name: 'Button',
  props: {
    label: String,
  },
};
</script>

示例 Story (Button.stories.js):

javascript
import Button from './Button.vue';

export default {
  title: 'Components/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: '这是一个用于展示如何使用按钮的例子。',
      },
    },
  },
};

export const Primary = () => ({
  components: { Button },
  template: '<Button label="点击我" />',
});

步骤 4: 查看 Storybook

运行 Storybook 服务器：

bash
npm run storybook

现在，在浏览器中打开 Storybook，你应该能看到你的组件以及相应的描述。在 Docs tab 下，你将看到你的组件描述和使用例子。

通过这种方式，你不仅提供了组件的视觉展示，还有详细的文档描述和使用方式，这对于团队的其他成员来说是非常有帮助的。