vue组件文档生成备注详解

目录
  • vue组件文档生成备注
    • 内容实现
  • Vuese自动生成vue组件文档
    • 安装Vuese
    • 在根目录下新增配置文件 .vueserc
    • 在package.json新增脚本,并启动

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 启动脚本

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

赞 (0)

相关推荐

  • Vue组件文档生成工具库的方法

    Vue组件文档生成工具库的方法

    目录 解析.vue 文件 提取文档信息 提取组件名称.描述.props.methods.model 提取描述 提取 methods 提取 props 提取 model 提取组件Events 提取组件Slots 结语 程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用第三方的一些比较常见问题 文档提取信息不全面,可能有些信息你需要提取但是它又不支持.

  • 从组件封装看Vue的作用域插槽的实现

    从组件封装看Vue的作用域插槽的实现

    作用域插槽不是那么直观的一个概念.Vue文档使用了一段描述性的话来解释作用域插槽: 有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽 -- 但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西.这也是作用域插槽的用武之地. 但在我看来,至少是第一次读到的时候,这段话相当不好理解.插槽不是分发内容到子组件吗,为什么还要从子组件中获取数据?不是已经有了通过emit事件的方法从子组件向父组件传递数据吗,为什么需要它?作用域插槽到底是来干嘛的?-

  • vue 2.0封装model组件的方法

    vue 2.0封装model组件的方法

    本文介绍了vue 2.0封装model组件的方法,分享给大家,希望对大家有所帮助 单文件组件 使用单文件组件封装model的模板.逻辑和样式,之后就可以在页面中调用此通用组件. 需求 model有两个使用场景: 1.备注/修改密码(简易): 在屏幕中垂直居中 2.添加/修改/展示信息(复杂): 距离屏幕顶部200px,内容过长时可滚动. 3.常规要求(共同点): 标题,关闭icon 点击确定/关闭/遮罩,隐藏model组件 分析上述需求点,得到如下图: wrapper:负责遮盖屏幕 inner:

  • vue组件文档生成备注详解

    vue组件文档生成备注详解

    目录 vue组件文档生成备注 内容实现 Vuese自动生成vue组件文档 安装Vuese 在根目录下新增配置文件 .vueserc 在package.json新增脚本,并启动 vue组件文档生成备注 在我们团队开发时一定会有一些公共组件诞生出来,那么这些诞生出来的组件我们要怎么让别人知道并且使用呢.写一个专门维护的文档页面?专人去维护?还是选择一个线上公共word的更新上去? 其他的我就不说什么优缺点了 自己体会 我只说一下我们团队中是怎么维护这些公共组件的. 说之前我们先了解一下这个插件vue

  • 解析如何自动化生成vue组件文档

    解析如何自动化生成vue组件文档

    目录 一.现状 二.社区解决方案 2.1.业务梳理 三.技术方案 3.1.Vue文件解析 3.2.信息提取 3.2.1.可直接获取的信息 3.2.2.需要约定的信息 四.总结 五.展望 一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么的.该怎么用,还必须得再去翻看源码,或者压根就没注意到这个组件 的存在导致重复开发.这个时候就非常需要维护对应的组

  • SpringBoot使用swagger生成api接口文档的方法详解

    目录 前言 具体例子 maven配置 项目application.yml配置 springApplication添加swagger注解 在控制层添加swagger注解 前言 在之前的文章中,使用mybatis-plus生成了对应的包,在此基础上,我们针对项目的api接口,添加swagger配置和注解,生成swagger接口文档 具体可以查看本站spring boot系列文章: spring boot项目使用mybatis-plus代码生成实例 具体例子 maven配置 在使用之前,我们需要添加s

  • Java生成word文档的示例详解

    目录 目标 依赖 模版 实体 代码 目标 依赖 <!-- poi工具类--> <dependency> <groupId>com.deepoove</groupId> <artifactId>poi-tl</artifactId> <version>1.12.0</version> </dependency> 模版 实体 实体类需要和模版内的动态字段对应 代码 @GetMapping(value =

  • vue组件三大核心概念图文详解

    前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

  • vue组件 keep-alive 和 transition 使用详解

    1.keep-alive 能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. // 组件 export

  • Python操作word文档的示例详解

    Python操作word文档的示例详解

    目录 写在前面 创建一个文档 先实现第一步,写入一个标题 添加文字段落 列表的添加 图片的添加 表格添加 相关样式设置 页眉和页脚 写在前面 python-docx 不支持 doc 文档,一定要注意该点,如果使用 doc 文档,需要提前将其用 Word 相关软件转换为 docx 格式. doc 和 docx 是存在本质差异的,一个是二进制,另一个 XML 格式的文件. 模块的安装 pip install python-docx . 以下网址首先准备好 官方手册:https://python-do

  • Vue组件之间四种通信方式详解

    Vue组件之间四种通信方式详解

    目录 前言 父子组件通信​ 父组件与子孙组件的通信​ 父组件获取子组件数据​ 无需考虑组件关系的通信​ 前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信​ 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改

  • 运用Python巧妙处理Word文档的方法详解

    运用Python巧妙处理Word文档的方法详解

    目录 工具 生成Word案例 读取操作word文档 总结 工具 python3.7 Pycharm Excel python-docx 生成Word案例 创建一个demo.doc文档,代码如下: from docx import Document from docx.shared import Cm,Pt from docx.document import Document as Doc #构建doc对象 document = Document() #操作文档标题 document.add_he

随机推荐