首先我们先要理解工程化是什么？
工程化即系统化、模块化、规范化的一个过程。 如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是面向编码的，那么工程化要解决的是如何提高整个系统生产效率。如何提高编码、测试、维护阶段的生产效率。
一个完整的前端工程化流程包括以下流程：
可以看出生成文档工具是开发阶段偏向于规范，而在部署阶段产出效用的一环。今天我们讨论的主题是关于生成文档站点的选择。关于工程化的其他模块暂时不展开。
Jsdoc是通过注解方式给为工具库、类库等生成文档。
使用方法分为以下步骤：
1.安装
2.配置
3.配置标题 使用@tutorial
您也可以为提供了一个单独的 文件，使用教程标识符作为文件名。此方法已过时，不应该被用于新的项目。
4.使用
- 生成文档
至此jcdoc即可生成文档。下面是样例图展示：
Docsify是一个用Markdown文件建立链接的生成文档工具，偏向于Vue官方文档的风格. 使用时需要有一点Markdown的语法基础。这里就不展开细说。
1.初始化
初始化成功后，可以看到 目录下创建的几个文件
- 入口文件
- 会做为主页内容渲染
- 用于阻止 GitHub Pages 忽略掉下划线开头的文件
2.配置项
3.拓展MarkDown语法
可与html一起共用
4.本地预览
样例图：
封面图
文档首页图 与
文件中的链接指向 即可完成以下展示
基于mdx语法的、偏向于react风格为组件库生成文档的工具。
1.下载
2.自动读取配置文件
v2以上使用ts时需要配置
使用 Gatsby 配置 webpack， 需要新建一个gatsby-node.js，项目默认读取
3.使用说明
Button组件
Button.mdx说明文档文件
路由：会根据项目的文件结构生成路由
效果图
- 运行及打包命令
尤大在2018年发布的关于生成vue文档的轮子。 主要还是需要配置三个配置：主页、导航栏、侧边菜单栏、搜索框等等。 1.下载
- 配置
README.md默认为首页、config.js为项目启动时读取的配置文件
3.使用及构建
效果图
Dumi是使用mdx编写的React框架文档工具
特性
- 📦 开箱即用，将注意力集中在组件开发和文档编写上
- 📋 丰富的 Markdown 扩展，不止于渲染组件 demo
- 🏷 基于 TypeScript 类型定义，自动生成组件 API
- 🎨 主题轻松自定义，还可创建自己的 Markdown 组件
- 📱 支持移动端组件库研发，内置移动端高清渲染方案
- 📡 一行命令将组件资产数据化，与下游生产力工具串联
1.初始化及部署
1.使用方法：
为组件库各个Demo提供可交互式的样例模板
默认路由为根据页面结构自动生成，不需要手动配置
在mdx中如何引用外部demo
到此这篇前端工程化工具（前端工程化概念）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！/pre>
p>2.配置
/p>
p>菜单配置
/p>
pre>
/pre>
p>导航栏配置
/p>
pre>
/pre>
p>3.编写组件时，Api自动生成
/p>
p>
/p>
p>
/p>
p>
/p>
p>4.使用时的效果图
/p>
p>可交互的组件+Api接口说明
/p>
p>
/p>
h4 data-id="heading-8">React Styleguidist
/h4>
h4 data-id="heading-9">Storybook
/h4>
h4 data-id="heading-10">Gitbook
/h4>
h4 data-id="heading-11">Hexo
/h4>
h4 data-id="heading-12">Vitepress
/h4>
p>以上就是我对文档生成工具的使用集合。可以看出工具也是从需要过多的手动配置慢慢进化成开箱即用的 、功能更多的、不需过多配置的文档工具。
/p>
p>
参考资料/p>
p>Jsdoc中文文档
/p>
p>Docsify官方文档
/p>
p>VuePress官方文档
/p>
p>Gatsby官方文档
/p>
p>Dumi官方文档
/p>
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/52615.html