vue 项目自动生成组件说明文档 styleguidist

代码搬运媛2024-11-18 9:51

styleguidist 是什么？

在我们的项目中，只要你想你就可以根据配置生成自己想要的组件文档，支持网页端展示。

使用方式

（1）安装

复制代码

vue add styleguidist

生成配置文件及安装 vue-cli-plugin-styleguidist （vuecli 的对应插件）

复制代码

npm install --save-dev vue-styleguidist

安装项目插件

（2）配置文件

配置package.json脚本

复制代码

 "styleguide": "NODE_ENV=development styleguidist server",
  "styleguide:build": "NODE_ENV=production styleguidist build",

styleguide.config.js

复制代码

module.exports = {
	// set your styleguidist configuration here
	title: '公共组件文档',
	// components: 'src/components/**/[A-Z]*.vue',
	components: ['src/components/AppButton.vue'],
	defaultExample: true,
	exampleMode: 'expand'
}

默认会识别 src/components 下的组件文件.

（3）根据文档要求增加注释

具体编写规则参照官方文档：https://vue-styleguidist.github.io/docs/Documenting.html

（4）生成组件说明文档

复制代码

npm run styleguide