vue组件文档生成备注详解

更新时间：2022年04月13日 09:42:17 作者：孤叶独飞

这篇文章主要介绍了vue组件文档生成备注详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue组件文档生成备注

在我们团队开发时一定会有一些公共组件诞生出来，那么这些诞生出来的组件我们要怎么让别人知道并且使用呢。写一个专门维护的文档页面？专人去维护？还是选择一个线上公共word的更新上去？

其他的我就不说什么优缺点了自己体会

我只说一下我们团队中是怎么维护这些公共组件的。

说之前我们先了解一下这个插件vue-styleguidis

npm的说话时：Vue-Styleguidist是Vue组件的样式指南生成器。它列出了组件，并根据Markdown文件显示了可编辑的实时使用示例。您可以使用它来生成静态HTML页面以进行共享和发布，也可以使用该平台作为使用热重载的dev服务器开发新组件的工作台。

看到了吧，说的很清楚 Vue组件的样式指南生成器。它列出了组件，并根据Markdown文件显示了可编辑的实时使用示例

好！下面就是我在实际项目中的应用

内容实现

我们项目是使用vue-cli来创建的，我也只讲这个其他的你们去搜其他的博客吧，

cd到自己的项目下，敲下如下命令。

vue add styleguidist

这时我们项目会增加一下文件和代码如图

在这里插入图片描述

package.json中增加了

在这里插入图片描述

讲到这里我们大概的配置就讲完了

下面就是讲一讲关于组件中我们怎么来写文档了

在这里插入图片描述

写好了之后我们可以运行一下打包一下

在这里插入图片描述

之后可以看到下面的页面效果

在这里插入图片描述

具体什么意思我就不多说了！我这里就是告诉你怎么跑起来和怎么配置，并且给你证明这个可以用！

Vuese自动生成vue组件文档

安装Vuese

npm i vuese --save-d

在根目录下新增配置文件 .vueserc

{
  "include": [
    "./components/**/*.vue"
  ],
  "title": "ASui-doc",
  "genType": "docute",
  "outDir": "./docs"
}

include：指定构建组件目录。
title: 文档名称
genType: 指定生成的文档类型，docute 会把vue文件构建出的所有markdown，整合为一个单页应用。
outDir：指定文档输出目录，这里指定为./docs，是为了配和在master分支接入OA Pages。

在package.json新增脚本,并启动

"scripts": {
    ...
    "build_doc": "npx vuese gen && npx vuese serve --open"
 },

运行 npm run build_doc 启动脚本

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在Vue 中使用Typescript的示例代码
这篇文章主要介绍了在Vue 中使用Typescript的示例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
vue中的v-show,v-if,v-bind的使用示例详解
这篇文章主要介绍了vue中的v-show,v-if,v-bind的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
解决vue中使用proxy配置不同端口和ip接口问题
这篇文章主要介绍了解决vue中使用proxy配置不同端口和ip接口问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
vue+echarts5实现中国地图的示例代码
本文主要介绍了vue+echarts5实现中国地图的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
vue 路由缓存路由嵌套路由守卫监听物理返回操作
这篇文章主要介绍了vue 路由缓存路由嵌套路由守卫监听物理返回操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Uniapp中WebView的使用与后退键处理教程
在Uniapp中使用web-view组件来加载H5页面时,对于后退键的处理是一个常见需求,下面这篇文章主要给大家介绍了关于Uniapp中WebView的使用与后退键处理的相关资料,需要的朋友可以参考下
2024-07-07
vue中如何创建多个ueditor实例教程
这篇文章主要给大家介绍了关于vue中如何创建多个ueditor的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-11-11
Vue SSR 组件加载问题
这篇文章主要介绍了Vue SSR 组件加载问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-05-05
vue+elementUI动态增加表单项并添加验证的代码详解
这篇文章主要介绍了vue+elementUI动态增加表单项并添加验证的代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-12-12
vue 更改连接后台的api示例
今天小编就为大家分享一篇vue 更改连接后台的api示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11