Vue.js项目中如何使用Storybook的stories.js文件里定义的组件案例？

index.stories.js 里导出的 withText 是 Storybook 用来生成组件演示示例的配置函数，不是可以直接导入到业务 .vue 文件中使用的组件。你要复用的本质是该配置对应的 MyButton 组件，以及它「带Hello Button文本、点击触发事件」的用法。

• 确认 MyButton.vue 文件的存放路径，对应stories文件中导入的 ../components/MyButton.vue 路径
• 在你需要使用该按钮的 .vue 文件中，按如下方式导入并使用：

<template>
  <div class="your-component-wrapper">
    <!-- 直接复用withText对应的按钮写法即可 -->
    <my-button @click="handleClick">Hello Button</my-button>
  </div>
</template>

<script>
// 路径根据你当前文件的位置调整，比如业务文件在src/views目录下，路径可以写成 '@/components/MyButton.vue'
import MyButton from '../components/MyButton.vue'

export default {
  components: {
    MyButton
  },
  methods: {
    handleClick() {
      // 这里写你的业务点击逻辑即可
      console.log('按钮被点击')
    }
  }
}
</script>

• 如果需要复现Storybook里的点击日志效果，可以导入@storybook/addon-actions的action方法替代自定义的点击逻辑，这个工具仅用于调试，业务场景一般不需要使用。

不要尝试直接导入index.stories.js里的withText到业务代码中使用。stories文件的作用仅为Storybook提供组件演示样例，不属于业务代码的一部分，生产环境打包默认不会引入这类文件。如果需要复用某一种固定配置的按钮，可以直接基于MyButton封装业务通用组件，不需要依赖stories的配置。

内容的提问来源于stack exchange，提问作者J'ohm Bon