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

相关推荐
2501_9159184110 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂11 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技11 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip11 小时前
JavaScript二叉树相关概念
前端
attitude.x12 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java12 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)12 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术12 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫12 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css