https://github.com/rywaroy/vtmd
:wrench: .vue文件 react自动生成说明文档工具
https://github.com/rywaroy/vtmd
babel markd node vuepress
Last synced: 8 months ago
JSON representation
:wrench: .vue文件 react自动生成说明文档工具
- Host: GitHub
- URL: https://github.com/rywaroy/vtmd
- Owner: rywaroy
- License: mit
- Created: 2019-06-20T02:52:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T02:22:32.000Z (over 4 years ago)
- Last Synced: 2025-09-17T00:50:33.899Z (9 months ago)
- Topics: babel, markd, node, vuepress
- Language: JavaScript
- Homepage:
- Size: 298 KB
- Stars: 10
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vtmd
> .vue文件 / umi 转化成说明文档，配合vuepress使用，因懒惰而进步！
## 安装
```
npm i vtmd -D
```
## 使用
创建`vtmd.config.js`文件
```js
module.exports = {
entry: 'components',
compontent: true,
output: 'docs',
};
```
执行命令
```
npx vtmd --component --config vtmd.config.js
```
或者指定文件
```
npx vtmd components/A components/B.vue
```
> 文件后缀可不带.vue，会自动检测添加
假如不配置config，会默认查找当前目录下的`vtmd.config.js`文件，没有该文件则会使用默认配置
**配置参数说明**
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | :--- |
| entry | string | src | 入口文件夹，该文件夹内所有vue文件都将被执行转化 |
| compontent | boolean | false | 是否使用vue组件 |
| ignore | string、array | null | 需要忽略的文件夹 |
| output | string | doc | 生成的目标文件夹 |
| target | array | [] | 指定vue文件的路径 |
配置了`compontent: true`可以使用vue组件来自定义样式。使用`--component`,默认的配置参数`compontent`会变成`true`，同时vtmd会在`docs/.vuepress/components`文件夹下生成vue组件：
* `VtmdHead2.vue` - 改写 h2 组件
* `VtmdHead3.vue` - 改写 h3 组件
* `VtmdMethodName.vue` - methods、computed、filters、watch 方法名组件
* `VtmdNotes.vue` - 注释组件
* `VtmdProps.vue` - props data 的属性名组件
* `VtmdBlock.vue` - 块组件
* `VtmdFileBox.vue` - 文件容器组件
改写以上组件就可以自定义样式。请确保配合使用[vuepress](https://vuepress.vuejs.org/zh/guide/)，否则vue组件将无法正常展示。
> `--component` 会覆盖原来的组件，请谨慎使用
### 注释规范
* `@version` - 版本号
* `@author` - 作者
* `@param` - 参数
* `@returns` - 返回参数
* `@intro` - 介绍
* `@url` - 地址
* `@image` - 图片
* `@txt` - 文本
* `@title` - 标题
> 注释中不带有@ 自动当做正常文本处理，带上@txt
在代码中，块级注释和行级注释是等同的
```js
/**
* @intro 这是介绍
* @version 1.1.1
* @author zhangzhihao
* @url www.3zsd.com
* @image ./images/1.jpeg
* @param {string} apple - name.
* @param {string} banana - name.
* @returns {Number} Sum of a and b
* 文本
* 文本2
*/
```
等同于
```js
// @intro 这是介绍
// @version 1.1.1
// @author zhangzhihao
// @url www.3zsd.com
// @image ./images/1.jpeg
// @param {string} apple - name.
// @param {string} banana - name.
// @returns {Number} Sum of a and b
// 文本
// 文本2
```
最后会转化成
```md
> 这是介绍
版本号: 1.1.1
作者: zhangzhihao
地址: www.3zsd.com
图片: 
文本2
**参数**
| 参数 | 类型 | 说明
| ---- | ---- | ---- |
| apple | string | name.
| banana | string | name.
**返回值**
| 类型 | 说明
| ---- | ---- |
| Number | Sum of a and b
```
设置了vue组件下会转化成：
```md
::: tip 介绍
这是介绍
:::
**参数**
| 参数 | 类型 | 说明
| ---- | ---- | ---- |
| apple | string | name.
| banana | string | name.
**返回值**
| 类型 | 说明
| ---- | ---- |
| Number | Sum of a and b
```
[vue文件解析细节](docs/Vue.md)
[umi解析细节](docs/Umi.md)