1.0.0 • Published 5 years ago
abm-components-docs v1.0.0
vue组件自动生成文档
此插件利用jsdoc注释api开发,适用于vant-cli创建组件库文档信息,如是jsdoc重度使用者,有一些描述名可能会词不达意,请小心使用
使用
npm install --save-dev abm-components-docs
"script": "node_modules/abm-components-docs/index.js"
在package.json同级目录创建 docs-config.js
module.exports = {
src: 'src/**/*.js'
}
组件描述
/**
* @exports demo-button 组件名 必须
* @classdesc 中文组件名
* @description DemoButton 是一个示例按钮组件 组件描述信息
*/
export default {
name: 'abm-panel'
}
props
需按如下格式书写
props: {
/**
* @kind props 必须写成kind props
* @type {(string|Array)}
* @default `primary`
* @description 类型
*/
type: {
type: [String, Array],
default: 'primary'
}
}
事件
/**
* @event click
* @emits doc 必须填写为 doc
* @description 点击事件
* @param {object|string|Function} 事件参数 参考jsdoc @param
*/
this.$emit('click', this)
slots
render() {
/**
* @name default
* @kind slot
* @description 默认插槽
*/
return (
<div>
{this.$slots.default}
</div>
)
}
demo 代码生成
在组件demo文件中新增index.vue
<template>
<demo-section>
<!-- 需按照如下格式书写 -->
<demo-block title="基础用法">
<demo-button>按钮</demo-button>
</demo-block>
</demo-section>
</template>
tip: js文件请单独copy
1.0.0
5 years ago