0
点赞
收藏
分享

微信扫一扫

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


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


举报

相关推荐

0 条评论