vite插件-自动生成vue组件文档

特点

• 支持热更新
• 快速启动，依赖于 vite，无需另起服务
• 自动生成组件导航
• ui 采用了vant-ui的样式
• 核心方法覆盖率达到了 92.86%

使用

yarn add vite-plugin-vue-docs -D

// vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDocs from "vite-plugin-vue-docs";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueDocs()],
});

example

git clone https://github.com/meetqy/vite-plugin-vue-docs.git
yarn
yarn dev
yarn example:dev

语法

emits,props，在vue中有对应的写法，所以只需要在写法上加上注释，插件就会自动解析。

ref

ref 一般调用的是methods当中的某一些方法，所以需要在方法上面加上@vue-docs-ref标识，并使用多行注释的方式。
注释规范参照JavaScript编码规范-函数/方法注释

export default {
  methods: {
    /**
     * @vue-docs-ref
     * @description 这是一个say方法
     * @param {string} name 姓名
     * @param {number} age  年龄
     * @return {name: string, age: number}
     */
    say(name: string, age: number) {
      return {
        name,
        age,
      };
    },
  },
};

参数说明

名称	说明	必填
@vue-docs-ref	通过ref调用标识	true
@description	描述信息	false
@param	参数	false
@return	返回值	false

计划

🚀 表示已经实现的功能，👷 表示进行中的功能，⏳ 表示规划中的功能

功能	状态
打包成静态网页	⏳ 规划中
页面跳转 history 模式 || hash 模式	⏳ 规划中
可配置文档网站	⏳ 规划中
修改文件直接热更新，无须 F5 刷新	⏳ 规划中
支持解析slot	👷 进行中
支持解析ref	🚀 已完成
支持defineComponent()写法	🚀 已完成
支持type多种类型	🚀 已完成
自动生成路由	🚀 已完成

changlog

版本日志

项目地址

Gitee
Github