Vue-component-documentation NPM

Vue 3 + Vite

vue 组件文档展示采用 Vite 导入本地文件，

用路由进行展示的

用 comment-parser 解析文件中的注释解析注释生成文档

用 es-module-lexer 解析测试文件中引用，展示代码

用 highlight.js 展示代码高亮

用 markdown-it 解析 md 文件

开发一个可以用来只要写一次代码注释就可以，自动生成查看文档页面的

写组件示例代码可以自动展示，提供错误，和需求的示例

当前项目用 vue + vite 开发的用 pnpm 引入

组件文件

组件文件说明

/**
 * @assembly 是组件标识
 * @name 组件名称 组件中文名称
 * @author 作者
 * @description 组件介绍
 * @date 组件更新时间
 */

组件 props 组件属性

/**
 * 多标签
 * @props 是props属性标识
 * @name 属性名
 * @type 类型
 * @default 默认值
 * @selectable 可选值
 * @description 说明
 */
/**
 * 单标签
 * @props {类型} 属性名=默认值 (可选值) 说明
 */

组件 slot 组件插槽

/**
 * 多标签
 * @slot 是slot插槽标识
 * @name 插槽名
 * @selectable 子标签
 * @description 说明
 */
/**
 * 单标签
 * @props 插槽名 (可选值) 说明
 */

组件 emits 组件事件

/**
 * 多标签
 * @emits 是emits事件标识
 * @name 事件名
 * @selectable 回调参数
 * @description 说明
 */
/**
 * 单标签
 * @emits 事件名 (回调参数) 说明
 */

组件 expose 组件方法

/**
 * 多标签
 * @expose 是expose方法标识
 * @name 方法名
 * @selectable 参数
 * @description 说明
 */
/**
 * 单标签
 * @expose 方法名 (参数) 说明
 */

示例文件

示例代码标识

用组件出问题了的标识

/**
 * @error 问题说明
 */

用组件给出的建议，和改进

/**
 * @proposal 建议说明
 */

配置文件

document.config.js

    router: '__document', // 路由地址
    components: import.meta.glob(
        '/src/components/**/index.(js|vue)',
    ),
    componentsRaw: import.meta.glob(
        '/src/components/**/index.(js|vue)',
        {
            as: 'raw',
        },
    ),
    md: 'README', // 读取示例终端MD文件名称
    example: '/example', // 示例开始路径
    examples: import.meta.glob(
        `/example/**/index.(js|vue)`,
    ),
    examplesRaw: import.meta.glob('/example/**', {
        as: 'raw',
    }),