前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >VueJS文档生成

VueJS文档生成

作者头像
luciozhang
发布于 2023-04-22 08:31:25
发布于 2023-04-22 08:31:25
2K00
代码可运行
举报
文章被收录于专栏:前端lucio前端lucio
运行总次数:0
代码可运行
1. 安装JSDoc 3

http://usejsdoc.org/index.html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g jsdoc
2. 安装jsdoc-vuejs插件

https://github.com/Kocal/jsdoc-vuejs

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install --save-dev jsdoc-vuejs
3. 配置JSDoc

新建conf.json文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "plugins": [
    "node_modules/jsdoc-vuejs"
  ],
  "source": {
    "includePattern": "\\.(vue|js)$"
  },
  "opts": {
    "destination": "./doc",
    "encoding": "utf8",
    "private": true,
    "recurse": true,
    "template": "node_modules/minami"
  }
}
4. 安装模板文件

minami

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install --save-dev minami
5. JSDoc语法

文档

jsdoc-vuejs插件新增了以下几个块标签

@vue-prop

@vue-data

@vue-computed

用法和@param一样。

6. 生成文档

在需要文档的地方,用块标签注释。

像这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
  * @classdesc 按钮
  * @vue-prop {String} value                 - 文本
  * @vue-prop {String} [width='265wx']       - 宽度
  * @vue-prop {String} [height='35wx']       - 高度
  * @vue-prop {String} [fontSize='16wx']     - 文本字号
  * @vue-prop {String} [fontColor='#ffffff'] - 文本颜色
  * @vue-prop {String} [fontStyle='normal']  - 文本风格,可选normal或blod
  * @vue-prop {Boolean} [disable=false]      - 是否不可点击
  * @vue-prop {String} [srcNormal=默认图片]    - 按钮背景图片
  * @vue-prop {String} [srcDiable=默认图片]    - 按钮不可点击背景图片
  *
  * @emits clickbtn 点击事件
  */

然后在工程目录下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 jsdoc -c ./conf.json ./src/*

完成!

效果是这样的:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
常用loader以及webpack的Vue安装
如果我们希望在项目中使用less、scss、stylus来写样式,webpack是否可以帮助我们处理呢? 我们这里以less为例,其他也是一样的。
名字是乱打的
2021/12/23
4.3K0
常用loader以及webpack的Vue安装
Vue2.0 新手完全填坑攻略——从环境搭建到发布
Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2
onety码生
2018/11/21
1.8K0
Webpack组件库打包超详细指南
我们的打包配置有一个基类文件,并根据不同的打包需求,有不同子类文件——完整组件库打包、单个组件打包、打包示例工程。
luciozhang
2023/04/22
3.3K1
Webpack组件库打包超详细指南
【第9期】webpack入门学习手记(三)
由于微信不允许外部链接,你需要点击页面尾部左下角的阅读原文,才能访问文中的链接。 距离上一次更新这个系列,过去了两天。最近实在是有点忙,没有挤出时间整理。感觉日更还真是困难以下是正文。 管理资源 如果看过之前的系列文章,应该会有一个学习项目webpackStudy,可以从文章下方找到之前的链接。官网给出的示例都是在一个项目中的html页面、package.json和webpack.config.js中进行修改。我为了保留每一小节的代码,并没有按照官网给出的方案处理,而是重新新建的配置文件。可以通过腾讯云开发
siberiawolf
2020/03/24
1.1K0
【第9期】webpack入门学习手记(三)
vue3.0基础教程(一)
近两年前端技术变革速度太快,vue不论针对web项目开发,网站制作,还是app,小程序开发,都越来越流行,其便捷性及易用程度都让你不得不考虑去学习。
用户1739228
2022/08/30
7700
vue3.0基础教程(一)
如何优雅地编写一个高逼格的JS插件?
在一个风和日丽的早晨,我正悠闲地喝着Coffe,突然领导向我走来,我赶紧熟练地切出VSCode,淡定自若地问:领导,什么事?领导拍了拍我的肩膀:你上次封装的方法同事跟我反馈使用起来很不错啊,你不如做成JS插件给大家用吧。我放下了手中的马克杯,甩了一下眼前仅剩的几根刘海:没问题啊,小Case!随即开始摸鱼....
茶无味的一天
2022/10/09
1.1K0
如何优雅地编写一个高逼格的JS插件?
Vue学习-Webpack
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
花猪
2022/02/17
1.3K0
Vue学习-Webpack
如何进行地图SDK开发(一)
开发时文件,在dist目录下添加index.html文件,引用lzugis-map.js,方便开发时调试。
牛老师讲GIS
2022/10/27
5610
如何进行地图SDK开发(一)
Angular 工具篇之文档管理
本文我们将介绍 Compodoc 这款工具,它用于为 Angular 应用程序生成静态文档。Compodoc 能够帮助 Angular开发人员为他们的应用程序生成清晰且有用的文档,这使得参与应用程序开发的其它成员也可以轻松了解当前应用程序或库的特性。
阿宝哥
2019/11/06
1.7K0
前端工程化(二)---webpack配置
一些知识点 目前在我的项目中起到的作用: 1、webpack在前端工程打包过程中起到了什么作用   声明入口(entry):通俗来讲,就是项目的构建过程是从哪开始,指定的是一个或多个js文件。前端开发,都是基于es6的模块化概念的,每一个文件都可以认为是一个模块,模块之间使用import语句相互引用,相互协作。这种依赖最终会形成一颗依赖树,而入口文件就是树的根。webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。每个依赖项随即被处理,最终输出到**.bundles文件中   声明出口(ou
用户2193479
2018/06/28
1.3K0
从零开始学VUE之Webpack(集成VueJS)
大概解释一下就是现在使用的是runtime-only,代码中不能存在模板代码,如果想运行代码中有模板代码的环境,请使用runtime-compiler
彼岸舞
2021/06/07
4410
从零开始学VUE之Webpack(集成VueJS)
vue 学习笔记第四弹 - Webpack
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
syy
2020/04/07
9030
npm 及vue,router,webpack安装 快速起步
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
多凡
2019/11/01
1K0
微服务[学成在线] day02:CMS前端开发
由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重点的标记等。
LCyee
2020/08/05
1.7K0
微服务[学成在线] day02:CMS前端开发
Vue-Cli优化编译速度
Vue-Cli脚手架会有webpack的很多默认行为,因此我们得知道基于Vue-Cli的项目,当前的webpack都配置了啥,然后才能做针对性的分析与优化。
码客说
2022/09/27
3.7K0
Vue-Cli优化编译速度
vue代码编辑器组件_vue activiti
import MonacoEditor from ‘vue-monaco-editor’
全栈程序员站长
2022/09/21
1.2K0
vue代码编辑器组件_vue activiti
奶爸级教学---webpack详细教学
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
用户10216580
2022/12/06
1.5K0
奶爸级教学---webpack详细教学
vue.config.js打包优化(有效)「建议收藏」
//百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻
全栈程序员站长
2022/07/01
1.8K0
vue.config.js打包优化(有效)「建议收藏」
commitLint和husky实现代码提交校验
现在使用的版本管理工具,首选应该都是git,入职到现在,git之外的版本管理工具也就最开始使用过svn。现在的项目,规范也越来越重要,所以才有各种强制的代码格式检测。当然,自己做过的项目还没有那么严格过,顶多就是一些格式化和eslint的统一。
wade
2022/03/28
1.4K0
Webpack+vue+boostrap+ejs构建Web版GM工具
Web前端的组件技术刷新真的是日新月异,前段时间看到很多童鞋分享了webpack的使用,刚好之前做我们游戏里Web版的GM工具的时候正在想怎么用简单的方式,做模块分离并且又不需要引入重量级的第三方库或组件,也不需要太繁琐的流程(毕竟只是个小工具)。
owent
2018/10/22
2.8K0
相关推荐
常用loader以及webpack的Vue安装
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验