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 依赖

Bug 报告

在报告 Bug 之前，请仔细查阅 Veaury 的文档和问题列表，看看是否存在匹配的问题。

要报告 Bug，请使用此仓库的 GitHub issues，务必包含一个可运行的最小工作示例（Minimal Working Example）。例如，你可以使用 storybook.new 来快速搭建一个复现环境。

迁移到更高版本的 Storybook

如果你想将此插件迁移以支持最新版本的 Storybook，可以查阅 插件迁移指南。