vue+vitepress自动生成组件文档

如何编写一套自己的组件并生成文档

背景

随着公司的组件库越来越大加上其他项目组的使用不得不将组件库抽离出来。并自动生成md文档,并使用vitepress直观的展示文档。

效果图

技术栈

  • vitepress
  • vue-docgen-cli

使用vue-docgen-cli将组件注释生成md文件,并用vitepress展示

安装

js 复制代码
yarn add -D vue-docgen-cli

生成md文件

首先,需要对我们的组件进行注释的编写例如:

vue 复制代码
<template>
	<button>按钮{{ text }}
		<!-- @slot Use this slot to have a header -->
		<slot name="header" />
	</button>
</template>
<script>
/**
* 组件使用的命名
* @displayName Best Button
* @author Yoge
*/
export default {		
	name: 'Button',
	props: {
		/**
		 * 按钮文本
		 */
		text: {
			type: String,
			required: true,
		},
		/**
		 * 按钮大小
		 * @values small, medium, large
		 */
		size:{
			type: String,
			default: 'small',
		}
	},
	methods: {
		/**
		 * Insert text at cursor position.
		 *
		 * @param {string} text
		 * @public
		 */
		add(text) {
			console.log('add');
			/**
			 * 成功事件.
			 *
			 * @event success
			 * @type {object}
			 */
			this.$emit('success', {})
		},
	},
};
</script>

配置docgen config文件

创建docgen.config.js文件

js 复制代码
/** @type import("vue-docgen-cli").DocgenCLIConfig */
module.exports = {
	componentsRoot: 'src/components',
	components: '**/[A-Z]*.(vue|ts)',
	outDir: './docs/components',
}
  • componentsRoot: 生成md的根目录
  • components: 对应的组件
  • outDir: md文件的输出目录

最后执行命令生成文件。

复制代码
npx vue-docgen

结合vitepress展示文档

安装
js 复制代码
 add -D vitepress
根据提示创建vitepress
csharp 复制代码
 npx vitepress init
bash 复制代码
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└
修改.vitepress/config文件
js 复制代码
const path = require('path')
const glob = require('globby')
const cwd = path.join(__dirname, '..')
const { parse } = require('vue-docgen-api')

module.exports = async () => {
	const sidebar = glob.sync('components/**/*.md', { cwd }).map(f =>  f)

	return {
		base: '/',
		head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
		title: 'VuePress DocGen Live',
		themeConfig: {
            // 左侧栏
			sidebar:sidebar.map(item=>{
                return {
                    text:item.split('/')[1],
                    link: '/'+item
                }
            }),
            search: {
                // 开启搜索
                provider: 'local'
            }
		},
	
	}
}

执行指令就能得到我们的组件代码文档咯!!!

js 复制代码
npx vitepress dev docs

写在最后

这只是最简单的一些用法,有兴趣的小伙伴可以自行阅读官网文档vitepress. Vue Styleguidist

相关推荐
袁煦丞37 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆38 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试