Driver.js 火了 8 年，终于更新了！Vue、React 都能直接用

过去几年，前端圈一直有一个很尴尬的问题：产品越来越复杂，功能越来越多。但用户第一次打开页面时，却经常一脸懵，于是很多团队开始做各种：

• 新手引导
• 功能介绍
• 首次使用教程
• 操作提示
• 产品 Tour

结果呢？开发一个引导流程往往要写几百行代码。

还要自己处理：遮罩层、高亮元素、弹窗定位、滚动定位、步骤切换、键盘事件、动画效果

一个简单的新手引导，最后硬生生写成一个小项目，直到很多开发者重新发现了一个老朋友：Driver.js

它已经开源很多年，如今Driver.js v1.6发布后，再次成为很多团队做产品引导的首选方案。

因为它只有一个目标：把应用内引导做到极致。

它不是 Tooltip，而是完整的产品引导系统

很多人第一次看到 Driver.js，都会觉得：

就是一个 Tooltip 库？

其实完全不是，官方定位非常明确：Lightweight JavaScript library for product tours, highlights, and contextual help for your product.

简单来说就是：

高亮遮罩步骤引导交互教程

全部一次搞定。

为什么越来越多 SaaS 产品都在用它？

如果你仔细观察很多国外产品第一次登录都会出现这种效果。

比如：

这里创建项目这里配置 API这里查看数据这里发布

整个页面都会自动：

• 聚焦目标区域
• 其它区域变暗
• 自动滚动到目标位置
• 显示说明文字
• 点击下一步继续

整个体验非常自然，而 Driver.js 做的正是这一套事情。

一个 API，就能完成整个产品 Tour

过去你可能需要：

监听元素计算位置创建遮罩绘制高亮创建弹窗处理动画处理滚动

现在只需要几十行代码。

import { driver } from "driver.js";import "driver.js/dist/driver.css";const driverObj = driver({steps: [element: "#create",popover: {title: "创建项目",description: "点击这里开始创建你的第一个项目"},element: "#deploy",popover: {title: "部署应用",description: "部署完成后即可上线"driverObj.drive();

页面立刻拥有完整的新手引导体验。

不只是高亮，它还能真正"带着用户操作"

很多人以为 Driver.js 只能：

高亮一下

实际上它支持完整的引导流程。

例如：自动滚动到目标、聚焦元素、遮罩背景、自定义按钮、上一步 / 下一步、ESC 退出、点击遮罩关闭、键盘导航 甚至还能：步骤之间执行回调、动态生成步骤、根据权限切换流程 很多后台系统都是这样做引导的。

官网 Demo 多到离谱

Driver.js 官网最大的特点不是文档，而是 Demo，官方几乎把所有场景都演示了一遍。

例如：

• Prevent Closing ( 防止关闭)
• Async Tour（异步步骤）
• Simple Highlight（仅高亮）
• Animated Tour（动画切换）
• Show Progress（显示进度）

基本复制过去就能用。

对 Vue、React、Angular 都非常友好

很多人担心：

Driver.js 是不是只能原生 JS？

完全不是，由于它没有框架绑定，所以几乎所有前端框架都能直接使用。

包括：

• React
• Vue 2
• Vue 3
• Angular
• Svelte
• Solid
• Astro
• Next.js
• Nuxt

甚至普通 HTML 页面都能直接接入。

最大优势：没有任何依赖

很多组件安装后会带来几十个依赖。Driver.js 不一样，它最大的特点就是：

Zero Dependency

没有 jQuery、没有 React、没有 Vue、没有任何运行时依赖，整个库非常轻量。对于后台管理系统，几乎没有接入成本。

真实开发场景有哪些？

很多团队第一次接触 Driver.js。

都会觉得：只有新手引导能用？

实际上它的使用场景远比想象中丰富。

例如：

① SaaS 首次使用引导

第一次登录自动介绍：

• 创建项目
• 配置成员
• 发布应用

几分钟就能完成上手。

② 新功能介绍

每次版本更新可以直接高亮：

这里新增了 AI 助手这里新增批量导入这里支持快捷键

用户不用翻更新日志。

③ 后台管理系统培训

很多企业后台功能几十上百个，新人培训成本很高。Driver.js 可以直接：

边操作边讲解边引导

培训效率提升很多。

④ 表单填写提示

例如：

请先填写企业名称再填写联系人最后提交审核

避免用户乱填。

Driver.js 为什么还能一直火？

前端每年都会出现很多新库，但 Driver.js 已经持续维护多年，原因其实很简单，它解决的是一个一直存在的问题：产品越来越复杂，但用户耐心越来越少。

很多时候真正影响用户留存的不是功能多少，而是：第一次打开产品会不会用。

而 Driver.js 正好解决了这个问题。

快速上手

安装非常简单：

npm install driver.js

引入样式：

import "driver.js/dist/driver.css";

创建实例：

import { driver } from "driver.js";const tour = driver({showProgress: true,animate: true,steps: [element: "#sidebar",popover: {title: "导航菜单",description: "这里可以快速切换模块。"},element: "#create-btn",popover: {title: "创建内容",description: "点击这里开始创建新的内容。"tour.drive();

几分钟内，你的产品就拥有了专业级的新手引导体验。

过去几年前端一直在卷：性能、框架、AI、Rust

但真正影响用户体验的，很多时候却是这些不起眼的小细节。一个好的产品，不仅要功能强，更要让用户：第一次打开就知道怎么用。

Driver.js 没有炫技、没有复杂配置，它只是把"产品引导"这一件事做到足够成熟。

对于后台管理系统、SaaS 平台、企业应用以及各种 Web 产品来说，它依然是目前最值得收藏的引导组件之一。

项目地址：https://github.com/kamranahmedse/driver.js 官方文档：https://driverjs.com/

你用过 Driver.js 吗？评论区聊聊～

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！