特色功能：
突出显示页面上的任何任何项目锁定用户交互创建功能介绍为用户添加聚焦器高度可定制 – 可在任何地方使用，可覆盖界面友好 – 可通过按键控制轻量级 – gzip 压缩后只有约4kb在所有主流浏览器中保持一致的行为免费用于个人和商业用途无论你喜欢哪种方式，你都可以使用 yarn 或 npm 进行安装。
yarn add driver.js npm install driver.js或者直接在文件中引入它。
<link rel="stylesheet" href="/dist/driver.min.css"> <script src="/dist/driver.min.js"></script>在vue项目中安装 driver.js
npm install driver.js在需要用到的页面引入，例如：help.vue
<script> import Driver from "driver.js" // import driver.js import "driver.js/dist/driver.min.css" // import driver.js css import steps from "../vendor/guide" export default { name: "Guide", data () { return { driver: null } }, mounted () { this.driver = new Driver({ className: "scoped-class", // className to wrap driver.js popover animate: true, // Animate while changing highlighted element opacity: 0.75, // Background opacity (0 means only popovers and without overlay) padding: 10, // Distance of element from around the edges allowClose: true, // Whether clicking on overlay should close or not overlayClickNext: false, // Should it move to next step on overlay click doneBtnText: "完成", // Text on the final button closeBtnText: "关闭", // Text on the close button for this step nextBtnText: "下一步", // Next button text for this step prevBtnText: "上一步" // Previous button text for this step // Called when moving to next step on any step }) // this.driver = new Driver() }, methods: { guide () { this.driver.defineSteps(steps) this.driver.start() } } } </script>配置步骤引导的节点，guide.js
//guide.js const steps = [ { element: "#guide-menu", popover: { title: "菜单导航", description: "点击菜单可切换右侧菜单内容", position: "right" } }, { element: ".collapse-box", popover: { title: "汉堡包", description: "点击收缩和展开菜单导航", position: "bottom" }, padding: 5 }, { element: "#guide-breadcrumb", popover: { title: "面包屑导航", description: "用于显示 当前导航菜单的位置", position: "bottom" } }, { element: ".user-content", popover: { title: "个人中心", description: "点击可操作", position: "left" } }, { element: "#tagsView", popover: { title: "最近打开任务", description: "最近打开任务菜单，点击可快速切换", position: "bottom" } } ] export default steps
