前端常用的新手引导库，总有一款适合你！
在产品发布新版本或者有新功能上线时，经常需要新手引导功能来引导用户了解应用，新手引导功能在应用中具有以下作用：
- 帮助用户快速掌握应用的基本操作和核心功能，提高用户的使用体验。
- 引导用户了解应用的特点、优势和使用方法，激发用户的使用兴趣和需求。
- 帮助用户理解应用中的一些复杂功能和高级操作，提高用户对应用的认知和使用技能。
- 通过个性化的引导，满足不同用户的需求和偏好，提高应用的用户留存率和满意度。
- 通过反馈和评估，收集用户的反馈和建议，帮助开发者改进应用的功能和性能。
总之，新手引导功能在应用中扮演着重要的角色，可以帮助用户快速上手、提高使用体验、增强应用的认知度和用户留存率。同时，也帮助开发者收集反馈和建议，不断改进和优化应用的功能和性能。
下面就来分享几个开箱即用的新手引导组件工具库，帮你快速实现新手引导功能！
Intro.js
Intro.js 是一个帮助你引导新用户了解你的网站或应用的 JavaScript 库。它提供了一个简单的方式来创建优雅的指导体验，使得用户可以了解你的产品特性，快速上手，并对你提供的功能有更深入的理解。
介绍
Intro.js 的主要特点是：
- 易于使用：你只需要在你的 html 文件中包含一些特定的标记，然后引入 intro.js 文件，就可以开始创建引导。
- 丰富的主题：Intro.js 提供了许多可配置的主题，可以方便地定制你的引导样式。
- 互动性强：Intro.js 支持多种交互方式，例如点击、触摸或键盘操作，使得用户可以以他们喜欢的方式进行交互。
- 兼容性：Intro.js 在各种设备和浏览器上都有良好的兼容性。
使用
使用 Intro.js 的步骤如下：
- 引入库：首先，你需要在你的 HTML 文件中引入 intro.js 库。
- 定义引导步骤：然后，在你的 JavaScript 代码中，你需要定义引导的步骤。每个步骤都包括一个元素、一个标题、一段描述和一个可选的子步骤。
- 启动引导：最后，你需要在你的 JavaScript 代码中启动引导。你可以选择在页面加载时自动开始引导，或者让用户手动启动引导。
例如：
introJs().setOption('showProgress', true).start();以上代码会在页面加载时自动开始引导，并且显示进度条。
请注意，为了使引导正常工作，你可能需要在你的 HTML 文件中包含一些特定的标记。具体的使用方法可以查阅 Intro.js 的官方文档。
Github：https://github.com/usablica/intro.js
Driver.js
Driver.js 是一个可以轻松实现新手指引交互的 javascript 工具库，主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。
介绍
Driver.js 的主要特点是：
- 简单轻量：使用很简单，独立无依赖，只有 4kb 大小
- 高度可定制：具有丰富强大的 api，按需使用
- 交互体验好：支持动画过渡，体验流畅舒服
- 突出显示任何内容：支持突出显示页面上的任何 dom 元素
- 简单几步实现功能介绍：为我们 Web 应用创建很棒的功能介绍，体验优秀
- 对用户操作友好：可以通过键盘控制引导流程，在生成力应用上很实用
- 浏览器兼容性表现一致：支持几乎所有浏览器（包括著名的IE）
安装
Driver.js 支持通过 npm 或 yarn 来安装，比如：
yarn add driver.js
npm install driver.js也可以在线或本地直接引入，需要注意要同时引入 css 文件：
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">使用方法
最简单的使用方法是高亮突出一个元素，只要给一个 CSS 选择器即可：
const driver = new Driver();
driver.highlight('#create-post');调整弹出框的位置：
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
// 位置支持设置为 left, left-center, left-bottom, top,
// top-center, top-right, right, right-center, right-bottom,
// bottom, bottom-center, bottom-right, mid-center
position: 'left',
}
});github：https://github.com/kamranahmedse/driver.js
shepherd.js
Shepherd.js 是一个用于创建引导体验的轻量级库。它可以帮助开发者创建一种用户友好的方式，引导用户了解新的功能或界面。
使用
使用Shepherd.js的基本步骤如下：
- 引入库：首先，你需要引入Shepherd.js库。这可以通过在HTML文件中引入相关脚本文件或使用CDN链接来实现。
- 创建引导：在JavaScript代码中，你可以使用Shepherd.js来创建引导。这通常涉及定义一系列的步骤，每个步骤都包含一个元素、一个标题、一段描述和可能的子步骤。
- 配置选项：你可以通过调用setOption方法来配置Shepherd.js的行为。例如，你可以设置是否显示进度条、是否允许用户跳过引导等。
- 启动引导：最后，调用start方法来启动引导。这通常在页面加载完成后执行。
例如：
var shepherd = new Shepherd.Tour({
defaults: {
classes: 'shepherd-theme-dark',
showCancelLink: true,
scrollTo: true,
steps: [
{
element: '#step1',
title: 'Step 1',
text: 'This is step 1'
},
{
element: '#step2',
title: 'Step 2',
text: 'This is step 2'
}
]
}
});
// 启动引导
shepherd.start();在这个示例中，我们创建了一个包含两个步骤的引导。每个步骤都关联到一个特定的元素（通过元素的ID指定），并具有一个标题和描述。最后，我们调用start方法来启动引导。
请注意，为了使引导正常工作，你需要确保每个步骤所关联的元素在页面加载时存在。此外，你还可以根据需要自定义引导的样式和行为。
shepherd：https://github.com/shipshapecode/shepherd
react-shepherd：https://github.com/shipshapecode/react-shepherd
vue-shepherd：https://github.com/shipshapecode/vue-shepherd
angular-shepherd：https://github.com/shipshapecode/angular-shepherd
React-JoyRide
React-JoyRide是一个React组件库，它提供了一个轻松的引导体验。这个库使用一个直观的API来定义引导步骤，并允许你自定义每个步骤的样式和行为。React-JoyRide还提供了一些额外的功能，如导航控制、回调函数等，使你能够更灵活地控制引导过程。
使用
使用React-JoyRide的基本步骤如下：
安装库：首先，你需要在你的项目中安装React-JoyRide库。你可以使用npm或yarn来安装它。
npm install react-joyride或者
yarn add react-joyride引入库：在你的React组件中，你需要引入React-JoyRide库。
import JoyRide from 'react-joyride';定义引导步骤：你需要定义引导的步骤。每个步骤都包含一个标题、描述和目标元素。你可以通过传递一个数组来定义多个步骤。
const steps = [
{
target: '#step1',
title: 'Step 1',
description: 'This is step 1'
},
{
target: '#step2',
title: 'Step 2',
description: 'This is step 2'
}
];配置选项：你可以通过传递一个配置对象来配置React-JoyRide的行为。例如，你可以设置是否显示导航控制、是否自动滚动到目标元素等。
const options = {
showNavigation: true,
autoScroll: true,
// 其他选项...
};渲染组件：最后，你可以在React组件中渲染JoyRide组件，并传递步骤和选项作为props。
<JoyRide steps={steps} options={options} />这样，当用户访问你的网站时，React-JoyRide会自动引导他们了解你的界面或功能。你可以根据需要自定义每个步骤的样式和行为，以及整个引导的外观和感觉。
Github：https://github.com/gilbarbara/react-joyride
Reactour.js
Reactour.js的设计目标是提供一种简单而灵活的方式来创建引导体验。它提供了丰富的组件和功能，使开发者能够轻松地定义引导步骤、导航控制、回调函数等。此外，Reactour.js还支持多种自定义样式和行为，以满足不同的项目需求。
使用
使用Reactour.js的基本步骤如下：
安装库：首先，你需要在你的项目中安装Reactour.js库。你可以使用npm或yarn来安装它。
npm install reactour或者
yarn add reactour引入库：在你的React组件中，你需要引入Reactour.js库。
import Reactour from 'reactour';定义引导步骤：你需要定义引导的步骤。每个步骤都包含一个标题、描述和目标元素。你可以通过传递一个数组来定义多个步骤。
const steps = [
{
target: '#step1',
title: 'Step 1',
description: 'This is step 1'
},
{
target: '#step2',
title: 'Step 2',
description: 'This is step 2'
}
];配置选项：你可以通过传递一个配置对象来配置Reactour.js的行为。例如，你可以设置是否显示导航控制、是否自动滚动到目标元素等。
const options = {
showNavigation: true,
autoScroll: true,
// 其他选项...
};渲染组件：最后，你可以在React组件中渲染Reactour组件，并传递步骤和选项作为props。
<Reactour steps={steps} options={options} />这样，当用户访问你的网站时，Reactour.js会自动引导他们了解你的界面或功能。你可以根据需要自定义每个步骤的样式和行为，以及整个引导的外观和感觉。
Github：https://github.com/elrumordelaluz/reactour
Vue Tour
Vue Tour是Vue.js的一个插件，它可以帮助开发者在应用程序中创建引导体验。Vue Tour提供了一种简单而直观的方式来定义和组织引导步骤，并在用户访问应用程序时自动引导他们了解新的功能或界面。
介绍
Vue Tour通过在应用程序中添加一个特殊的组件来工作。这个组件可以包含一系列的步骤，每个步骤都包含一个目标元素、一个标题、一个描述和一个可选的子步骤。当用户访问应用程序时，Vue Tour会自动引导他们按照定义的步骤进行操作。
Vue Tour还提供了一些额外的功能，如导航控制、回调函数等，使你能够更灵活地控制引导过程。此外，Vue Tour还支持多种自定义样式和行为，以满足不同的项目需求。
使用
使用Vue Tour的基本步骤如下：
安装库：首先，你需要在你的项目中安装Vue Tour库。你可以使用npm或yarn来安装它。
npm install vue-tour或者
yarn add vue-tour引入库：在你的Vue组件中，你需要引入Vue Tour库。
import VueTour from 'vue-tour';定义引导步骤：你需要定义引导的步骤。每个步骤都包含一个目标元素、一个标题和描述。你可以通过传递一个数组来定义多个步骤。
const steps = [
{
target: '#step1',
title: 'Step 1',
description: 'This is step 1'
},
{
target: '#step2',
title: 'Step 2',
description: 'This is step 2'
}
];配置选项：你可以通过传递一个配置对象来配置Vue Tour的行为。例如，你可以设置是否显示导航控制、是否自动滚动到目标元素等。
渲染组件：最后，你可以在Vue组件中渲染VueTour组件，并传递步骤和选项作为props。
<v-tour :steps="steps" :options="options" />这样，当用户访问你的应用程序时，Vue Tour会自动引导他们了解新的功能或界面。你可以根据需要自定义每个步骤的样式和行为，以及整个引导的外观和感觉。
Github：https://github.com/pulsardev/vue-tour
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
