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

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

vite插件-自动生成vue组件文档vite插件-自动生成vue组件文档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

计划

上一篇:vite构建项目与vue-cli构建项目


下一篇:Android - Android Studio 3.0 环境搭建