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