图文并茂的帮助文档你值得拥有

概述

工作中除了写代码开发需求，也需要写文档，怎么写好一个文档能够让读者既能看懂API，又能快速上述操作，所见即所得。本文基于vitepress、ace-builds带大家实现一个这样好用的帮助文档。

实现效果

• 在线预览地址：https://lzugis.cn/sdk-examples/leaflet/base.html

实现

vitepress工程的初始化可参考SDK帮助文档生成。

本文在此基础上做了做了优化与扩展，包括：

组件自动导入

在\docs\.vitepress\theme\index.js中添加如下代码：

import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('../vitepress/components/**/*.{vue,ts,tsx}')

export default {
  ...DefaultTheme,
  enhanceApp(ctx) {
    DefaultTheme.enhanceApp(ctx)
    // 注册所有组件
    for (const [key, component] of Object.entries(components)) {
      const name = key.match(/\/([^\/]+)\.vue$/)?.[1] ?? ''
      ctx.app.component(name, defineAsyncComponent(component))
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

自定义了 :::demo

通过自定义 :::demo实现代码的自动引入和实时预览。

完整代码