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中四种操作dom方法保姆级讲解
这篇文章主要介绍了Vue中四种操作dom方法，首先，在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势：MVVM，在vue中程序员几乎不操作DOM，只需要维护好数据即可，vue给程序员提供ref引用，不调用api直接获取元素组件的使用
2023-02-02
vue中template的三种写法示例
这篇文章主要介绍了vue中template的三种写法示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-10-10
Vue实现docx、pdf格式文件在线预览功能
在业务中，如果遇到文档管理类的功能，会出现需要在线预览的业务需求，本文主要是通过第三方库来实现文档预览功能，并将其封装成preview组件,感兴趣的可以了解一下
2022-09-09
vue封装可复用组件confirm,并绑定在vue原型上的示例
今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue+Mock.js模拟登录和表格的增删改查功能
这篇文章主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下
2018-07-07
Vue日期时间选择器组件使用方法详解
这篇文章主要为大家详细介绍了Vue日期时间选择器组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
还在用vuex?来了解一下pinia
这篇文章主要为大家详细介绍了pinia，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
2022-02-02
vue路由中前进后退的一些事儿
这篇文章主要给大家介绍了关于vue路由中前进后退的一些事儿，文中通过示例代码介绍的非常详细，对大家学习或者使用vue路由具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
解决element-ui中Popconfirm气泡确认框的事件不生效问题
这篇文章主要介绍了解决element-ui中Popconfirm气泡确认框的事件不生效问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue键盘事件点击事件加native操作
这篇文章主要介绍了vue键盘事件点击事件加native操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07