特点

  • 支持热更新
  • 快速启动,依赖于 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

vite插件-自动生成vue组件文档的更多相关文章

  1. 解放生产力,自动化生成vue组件文档

    一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么 ...

  2. 使用jsdoc-toolkit来自动生成js api文档

    近来前端组小盆友开发的类库越来越多,很多情况下彼此不知道写了些什么方法,为了更好的合作提高工作效率,找了个比较好的api文档生成方法.使用jsdoc-toolkit来自动生成js api文档. 一.  ...

  3. 打造自己的Vue组件文档生成工具

    程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用 ...

  4. 解析Markdown文件生成React组件文档

    前言 最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项 ...

  5. Go学习笔记(六) | 使用swaggo自动生成Restful API文档(转)

    关于Swaggo 或许你使用过Swagger, 而 swaggo就是代替了你手动编写yaml的部分.只要通过一个命令就可以将注释转换成文档,这让我们可以更加专注于代码. 目前swaggo主要实现了sw ...

  6. Golang使用swaggo自动生成Restful API文档

    #关于Swaggo 相信很多程序猿和我一样不喜欢写API文档.写代码多舒服,写文档不仅要花费大量的时间,有时候还不能做到面面具全.但API文档是必不可少的,相信其重要性就不用我说了,一份含糊的文档甚至 ...

  7. Spring Boot学习笔记 - 整合Swagger2自动生成RESTful API文档

    1.添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <!--swagger2--> <dependency> <groupId>io.spr ...

  8. 插件式WebApi服务及自动生成Api帮助文档

    上一篇博客中,讲到了将WebApi Host到控制台和IIS,本篇总结一下如何将WebApi的Service以插件的形式进行动态部署,并设置Hoster的首页显示Api帮助文档,当然,也包括动态部署进 ...

  9. C# 自动生成代码API文档

    暂时没学会正规的转载style临时记录一下 NET中的规范标准注释(一) -- XML注释标签讲解 http://www.cnblogs.com/mq0036/p/3544264.html NET中的 ...

随机推荐

  1. 稀疏自编码器及TensorFlow实现

    自动编码机更像是一个识别网络,只是简单重构了输入.而重点应是在像素级重构图像,施加的唯一约束是隐藏层单元的数量. 有趣的是,像素级重构并不能保证网络将从数据集中学习抽象特征,但是可以通过添加更多的约束 ...

  2. jmeter链接mysql数据库

    一.下载与MySQL对应的jar包 1.1.查询MySQL的版本, 命令语句 :SELECT VERSION(); 1.2.MySQL官网下载jar包 ,https://downloads.mysql ...

  3. 单点突破:MySQL之索引

    前言 开发环境:MySQL5.7.31 什么是索引 在MySQL中,索引(Index)是帮助高效获取数据的数据结构. 我们可以将数据库理解为一本书,数据库中的各个数据列(column)就是目录中的章节 ...

  4. 合宙Luat | 电源设计——模块应用必看的2个要点

    在模块应用设计中,电源设计是很重要的一部分. 由于射频发射时,会在短时间有一个较大电流的突发脉冲.在突发脉冲阶段内,电源必须能够提供高的峰值电流,不然有可能会引起供电电压的跌落.   而很多初学的朋友 ...

  5. Java知识复习(二)

    如何格式化日期? SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); Date dat=new Da ...

  6. SQL server中自定义排序

    select * from OrderPolicyDetail order by ( case Project when 'C' then 1, when 'A' then 2, when 'D' t ...

  7. Golang的一致性哈希实现

    Golang的一致性哈希实现 一致性哈希的具体介绍,可以参考:http://www.cnblogs.com/haippy/archive/2011/12/10/2282943.html   1 imp ...

  8. QTreeView 使用 QStandardItemModel

    QTreeView 使用 QStandardItemModel @ 目录 QTreeView 使用 QStandardItemModel 前言 一.直接上图 二.添加同级结点项 1.思路 2.实现 二 ...

  9. 聊一聊Unity协程背后的实现原理

    Unity开发不可避免的要用到协程(Coroutine),协程同步代码做异步任务的特性使程序员摆脱了曾经异步操作加回调的编码方式,使代码逻辑更加连贯易读.然而在惊讶于协程的好用与神奇的同时,因为不清楚 ...

  10. 基于HSI和局部同态滤波的彩色图像增强

    简介 在图像采集过程中,由于光照环境或物体表面反光等原因会造成图像光照不均 .图像的光照不均会直接影响图像分析的结果.因此,对光照不均图像进行增强,消除光照的影响是光照不均图像处理中不可缺少的环节 . ...