特点

  • 支持热更新
  • 快速启动,依赖于 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. 台积电5nm光刻技术

    台积电5nm光刻技术 在IEEE IEDM会议上,台积电发表了一篇论文,概述了其5nm工艺的初步成果.对于目前使用N7或N7P工艺的客户来说,下一步将会采用此工艺,因为这两种工艺共享了一些设计规则.新 ...

  2. PyTorch 自动微分

    PyTorch 自动微分 autograd 包是 PyTorch 中所有神经网络的核心.首先简要地介绍,然后将会去训练的第一个神经网络.该 autograd 软件包为 Tensors 上的所有操作提供 ...

  3. 分布式深度学习DDL解析

    分布式深度学习DDL解析 一.概述 给一个庞大的GPU集群,在实际的应用中,现有的大数据调度器会导致长队列延迟和低的性能,该文章提出了Tiresias,即一个GPU集群的调度器,专门适应分布式深度学习 ...

  4. PHPList 安装

    邮件发送开源软件 PHPList 安装介绍 1:安装基本信息 官网地址 地址:https://www.phplist.com/ 其他:https://www.d-ip.jp/phplist/ 官网手册 ...

  5. Zab协议 (史上最全)

    文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...

  6. 开箱即用的微服务框架 Go-zero(进阶篇)

    之前我们简单介绍过 Go-zero 详见<Go-zero:开箱即用的微服务框架>.这次我们从动手实现一个 Blog 项目的用户模块出发,详细讲述 Go-zero 的使用. 特别说明本文涉及 ...

  7. Django-ORM-事务和锁

    一.锁 行级锁 返回一个锁住行,值到事物结束的查询集. 所有匹配的行将被锁住,直到事物结束,这就意味着可以通过锁防止数据被其他事务修改. 一般情况下如果其他事务锁定了相关行,那么本查询将被阻塞直到锁被 ...

  8. NoSql非关系型数据库之MongoDB应用(一):安装MongoDB服务

    业精于勤,荒于嬉:行成于思,毁于随. 一.MongoDB服务下载安装(windows环境安装) 1.进入官网:https://www.mongodb.com/,点击右上角的 Try Free  , 2 ...

  9. SDLC开发安全流程

    2020年12月9日跟内部小伙伴分享SDLC流程及安全的一些思考,简单画了一个图,时间过得太快,记录一下 参考 https://blog.csdn.net/liqiuman180688/article ...

  10. RabbitMQ交换机

    RabbitMQ中,生产者并不是直接将消息发送给queue,而是先将消息发送给exchange,再由exchange通过不同的路由规则将消息路由到绑定的队列中进行存储,那么为什么要先将消息发送给exc ...