Driver.js 教程
Driver.js 是一个轻量的页面引导库，可以在网页上高亮指定元素，并配合弹层说明完成产品导览、首次使用提示、功能介绍和操作指引。
它不依赖具体框架，既可以直接在普通 HTML 页面中使用，也可以集成到 React、Vue、Svelte、Next.js 等现代前端项目中。
适合什么场景
| 场景 | 说明 |
|---|---|
| 新用户引导 | 用户第一次进入后台、编辑器、控制台时，逐步说明主要区域 |
| 新功能提示 | 发布新按钮或新入口后，短暂高亮并解释用途 |
| 复杂表单说明 | 对关键字段、风险选项、提交规则做上下文提示 |
| 内部系统培训 | 用分步导览代替长篇说明文档，降低学习成本 |
| 空状态转化 | 在页面没有数据时，引导用户完成第一次创建 |
学习路线
- 阅读 Driver.js 是什么，理解它解决的问题。
- 通过 安装与样式引入 准备项目。
- 学习 创建第一个 Tour 和 单点高亮。
- 掌握 弹层位置与按钮 和 主题样式。
- 用 Hooks 与事件 处理埋点、权限和表单保存。
- 通过 动态元素与异步引导 适配真实业务页面。
- 最后参考 最佳实践 和 官方资料 持续深入。
你将学到什么
- 如何安装 Driver.js 并正确引入默认样式。
- 如何用
steps描述一组页面引导。 - 如何使用
highlight()做一次性的功能提示。 - 如何配置按钮、进度、遮罩、滚动和弹层位置。
- 如何通过 hooks 处理生命周期、埋点、校验和清理逻辑。
- 如何在 React 与 Vue 中避免重复初始化和内存泄漏。