# Driver.js 教程

URL: https://caijiao.org/driver-js/
Source: docs/driver-js/index.md
Description: Driver.js 是一个轻量的 JavaScript 页面引导库，用于创建产品导览、元素高亮、功能提示和分步操作说明。本教程讲解安装、基础用法、配置、样式、Hooks、动态元素、Hints 与框架集成实践。

Driver.js 是一个轻量的页面引导库，可以在网页上高亮指定元素，并配合弹层说明完成产品导览、首次使用提示、功能介绍和操作指引。

它不依赖具体框架，既可以直接在普通 HTML 页面中使用，也可以集成到 React、Vue、Svelte、Next.js 等现代前端项目中。

## 适合什么场景

| 场景 | 说明 |
| --- | --- |
| 新用户引导 | 用户第一次进入后台、编辑器、控制台时，逐步说明主要区域 |
| 新功能提示 | 发布新按钮或新入口后，短暂高亮并解释用途 |
| 复杂表单说明 | 对关键字段、风险选项、提交规则做上下文提示 |
| 内部系统培训 | 用分步导览代替长篇说明文档，降低学习成本 |
| 空状态转化 | 在页面没有数据时，引导用户完成第一次创建 |

## 学习路线

1. 阅读 [Driver.js 是什么](/driver-js/01-intro/01-what-is-driver-js)，理解它解决的问题。
2. 通过 [安装与样式引入](/driver-js/01-intro/02-installation) 准备项目。
3. 学习 [创建第一个 Tour](/driver-js/02-basics/01-basic-tour) 和 [单点高亮](/driver-js/02-basics/02-highlight)。
4. 掌握 [弹层位置与按钮](/driver-js/02-basics/03-popover-position) 和 [主题样式](/driver-js/03-advanced/01-configuration)。
5. 用 [Hooks 与事件](/driver-js/03-advanced/02-hooks) 处理埋点、权限和表单保存。
6. 通过 [动态元素与异步引导](/driver-js/05-practices/01-async-and-dynamic) 适配真实业务页面。
7. 最后参考 [最佳实践](/driver-js/05-practices/02-best-practices) 和 [官方资料](/driver-js/reference/official) 持续深入。

## 你将学到什么

- 如何安装 Driver.js 并正确引入默认样式。
- 如何用 `steps` 描述一组页面引导。
- 如何使用 `highlight()` 做一次性的功能提示。
- 如何配置按钮、进度、遮罩、滚动和弹层位置。
- 如何通过 hooks 处理生命周期、埋点、校验和清理逻辑。
- 如何在 React 与 Vue 中避免重复初始化和内存泄漏。

## 参考资料

- [Driver.js 官方文档](https://driverjs.com/docs/installation)
- [Driver.js API 文档](https://driverjs.com/docs/api)
- [Driver.js GitHub 仓库](https://github.com/nilbuild/driver.js)
- [driver.js npm 包](https://www.npmjs.com/package/driver.js)