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
相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python