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

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689976 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt