不使用第三方库怎么实现【前端引导页】功能？

前言

随着应用功能越来越多，繁多而详细的功能使用和说明文档，已经不能满足时代追求 快速 的需求，而 引导页（或分步引导） 本质就是 化繁为简，将核心功能以更简单、简短、明了的文字指引用户去使用对应的功能，特别是 ToB 的项目，各种新功能需求迭代非常快，免不了需要 引导页 的功能来快速帮助用户引导。

下面我们通过两个方面来围绕着【前端引导页】进行展开：

• 哪些第三方库可以直接使用快速实现功能？
• 如何自己实现前端引导页的功能？

第三方库的选择

如果你不知道如何做技术选型，可以看看 山月大佬 的这一篇文章 在前端中，如何更好地做技术选型？，下面就简单列举几个相关的库进行简单介绍，具体需求具体分析选择，其他和 API 使用、具体实现效果可以通过官方文档或对应的 README.md 进行查看。

vue-tour

vue-tour 是一个轻量级、简单且可自定义的 Tour 插件，配置也算比较简单清晰，但只适用于 Vue2 的项目，具体效果可以直接参考对应的前面链接对应的内容。

driver.js

driver.js 是一个强大而轻量级的普通 JavaScript 引擎，可在整个页面上驱动用户的注意力，只有 4kb 左右的体积，并且没有外部依赖，不仅高度可定制，还可以支持所有主流浏览器。

shepherd.js

shepherd.js 包含的 API 众多，大多场景都可以通过其对应的配置得到，缺点就是整体的包体积较大，并且配置也比较复杂，配置复杂的内容一般都需要进行二次封装，将可变和不可变的配置项进行抽离，具体效果可见其 官方文档。