客户不会用就流失？别再手动教了！3行代码加个“新手引导”

大家好，我是“不想打工的码农”。

很多独立开发者以为：“功能做好就行，用户自己会摸索。”
但现实是：超过60%的新用户，会在第一次使用时因困惑而放弃。

而解决这个问题的成本，可能比你想象中低得多——
用一个叫 Driver.js 的轻量级 JS 库，你就能给关键页面加上高亮+气泡提示，像有个小助手在手把手教学！

一、为什么新手引导是 SaaS 的“隐形转化器”？

降低学习成本：用户30秒看懂核心功能，立刻产生价值感。
减少客服压力：不用再一遍遍解释“按钮在哪”。
提升付费转化：试用期内体验越好，续费率越高。

而且，它几乎不增加维护成本——写一次，终身生效。

二、实战：3步实现智能新手引导

第1步：安装 Driver.js（1条命令）

npm install driver.js# 引入样式import 'driver.js/dist/driver.css';

第2步：封装一个通用引导组件（核心！15行代码）

新建 OnboardingTour.vue：

<script setup>import Driver from 'driver.js'const props = defineProps({  steps: Array, // 引导步骤配置  key: String  // 用于标记“是否已完成”})const startTour = () => {  const driver = new Driver({    showProgress: true,    nextBtnText: '下一步',    prevBtnText: '上一步',    doneBtnText: '完成',    onClose: () => markTourAsDone() // 关闭时标记  });  driver.highlight(props.steps);}const markTourAsDone = async () => {  // 调用后端接口，记录该用户已完成此引导  await axios.post('/user/onboarding', { key: props.key });}</script><template>  <el-button @click="startTour" type="primary">查看使用指南</el-button></template>

第3步：在学生列表页集成引导

在 StudentList.vue 中：

<script setup>import OnboardingTour from './OnboardingTour.vue'import { onMounted } from 'vue'import axios from 'axios'onMounted(async () => {  // 检查用户是否已完成“学生管理”引导  const res = await axios.get('/user/onboarding/student-list');  if (!res.data.completed) {    // 自动启动引导（或延迟2秒后启动）    setTimeout(() => {      document.querySelector('#tour-trigger').click();    }, 2000);  }})</script><template>  <!-- 页面内容 -->  <el-table id="student-table">...</el-table>  <el-button id="import-btn">导入Excel</el-button>    <!-- 引导触发器（隐藏）-->  <div id="tour-trigger" style="display:none;">    <OnboardingTour       :steps="[        { element: '#student-table', popover: { title: '学生列表', description: '所有学生数据都在这里展示' }},        { element: '#import-btn', popover: { title: '批量导入', description: '点击这里上传Excel文件，快速添加学生' }}      ]"      key="student_list_v1"    />  </div></template>

效果：
新用户首次进入学生列表页，2秒后自动弹出高亮指引，一步步教他核心功能！

三、后端配合：记录引导完成状态

新增两个接口：

// 检查是否已完成某引导@GetMapping("/user/onboarding/{key}")public boolean checkOnboarding(@PathVariable String key) {    String userId = getCurrentUserId();    return onboardingService.isCompleted(userId, key);}// 标记为已完成@PostMapping("/user/onboarding")public void markCompleted(@RequestBody Map<String, String> req) {    String userId = getCurrentUserId();    onboardingService.markCompleted(userId, req.get("key"));}

对应的 onboarding_record 表：

CREATE TABLE onboarding_record (    user_id VARCHAR(50),    tour_key VARCHAR(50), -- 如 'student_list_v1'    completed BOOLEAN DEFAULT false,    completed_at DATETIME);