Storybook 附加组件 Vue 对 MDX 的支持

在 MDX 文件中使用 Vue 组件，就像它们是 React 组件一样。

限制

此附加组件处于早期阶段，存在以下限制

• 仅适用于 Vue 3 和 Storybook 8（对于 Storybook 7，请使用 v0.1.5）
• 组件必须在本地导入到 MDX 文件中
• Provide/Inject 尚未经过测试，但应该可以工作
• 自定义 API 可能会在将来发生变化

在本地运行 Storybook 时，还存在一个已知错误。有时，包含 Vue 组件的 MDX 页面第一次加载可能会崩溃，因为 Storybook 未正确执行 beforeVueAppMount 中定义的代码。这可能是由于 Storybook 解析和运行预览文件的方式，但在生产环境中此错误不会出现。您可以通过刷新浏览器标签页一次来解决此错误，它将在第二次加载时成功运行。

安装

yarn add -D storybook-addon-vue-mdx

在您的 .storybook/main.js 文件中，添加以下内容

export default {
  addons: ['storybook-addon-vue-mdx'],
}

使用

在 Sample.mdx 文件中，导入您需要的组件，并使用 Vue JSX 语法使用它

import MyComponent from 'path-to-components/MyComponent.vue'

<MyComponent>bla bla</MyComponent>

Vue JSX 语法在 Vue 文档 中有说明。请特别注意 传递插槽的语法。

自定义 Vue 应用上下文

此附加组件使用 veaury 在 React JSX 上下文中渲染 Vue 组件。特别是，附加组件调用 applyPureVueInReact。您可以通过在您的 .storybook/preview.js 文件中定义 globals 来传递选项，如下所示

const globals = {
  vueMdx: {
    beforeVueAppMount(app) {
      app.use(myCustomPlugin)
    },
  },
}

export default {
  globals,
}

您也可以根据 Veaury 的 自身文档 直接导入和使用 Veaury 的 applyVueInReact。

开发脚本

• yarn start 在观察模式下运行 babel 并启动 Storybook
• yarn build 构建和打包附加组件代码
• yarn pack:local 创建一个本地 tarball，以便在其他地方用作 NPM 依赖项

错误报告

在报告错误之前，请仔细查看 Veaury 的文档和问题列表，以查找匹配的问题。

要报告错误，请使用此存储库上的 GitHub 问题，确保包含一个可行的最小工作示例。例如，您可以使用 storybook.new 来启动一个重现环境。

迁移到更高版本的 Storybook

如果您想迁移附加组件以支持最新版本的 Storyboook，您可以查看 附加组件迁移指南。