Vue项目基于driverjs实现新用户导航

引导页就是当用户第一次或者手动进行触发的时候，提示给用户当前系统的模块介绍，比如哪里是退出，哪里是菜单等等相应的操作。

无论是开发 APP 还是 web 应用，新手引导都是一个很常见的需求，一般在这2个方面需要新手引导：

1. 用户第一次打开应用，对界面不够熟悉，或者作为一个创新型的产品，大部分用户没有类似的使用经验

2. 对成熟的应用进行一次较大的版本改动，UI 布局有比较大的改变，需要引导来告知用户

导航演示

Driver.js 介绍

Driver.js 是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。它没有依赖项，支持所有主要浏览器。

github：https://github.com/kamranahmedse/driver.js

Driver.js 的技术特性

简单轻量：使用很简单，独立无依赖，只有 4kb 大小

高度可定制：具有丰富强大的 API，按需使用

交互体验好：支持动画过渡，体验流畅舒服

突出显示任何内容：支持突出显示页面上的任何 dom 元素

简单几步实现功能介绍：为我们 Web 应用创建很棒的功能介绍，体验优秀

对用户操作友好：可以通过键盘控制引导流程，在生成力应用上很实用

浏览器兼容性表现一致：支持几乎所有浏览器（包括著名的IE）

安装依赖

npm 安装

yarn 安装

项目组件中引入依赖

代码实现

在项目中需要先实例化 driver 对象，然后调用 driver.defineSteps(array) 方法实现引导步骤。

在需要实现新用户引导的Vue文件中实例化driver对象，例如在项目的 main.vue 文件中，driver.js用法如下所示：

配置相关参数

defineSteps() 方法的参数为数组类型，数组中元素就是要执行的引导步骤。

step 选项包括：