在產(chǎn)品發(fā)布新版本或者有新功能上線(xiàn)時(shí)，經(jīng)常需要新手引導(dǎo)功能來(lái)引導(dǎo)用戶(hù)了解應(yīng)用。下面就來(lái)分享幾個(gè)開(kāi)箱即用的新手引導(dǎo)組件工具庫(kù)，幫你快速實(shí)現(xiàn)新手引導(dǎo)功能！

Intro.js

Intro.js 是一個(gè)使用廣泛的產(chǎn)品引導(dǎo)庫(kù)，它在 Github 上擁有 21.6k Star。其具有以下特點(diǎn)：

• 無(wú)依賴(lài)：它不需要任何其他依賴(lài)。
• 小而快：庫(kù)文件較小使得引導(dǎo)過(guò)程流暢直觀。JavaScript 文件的整體大小為 10KB，CSS 為 2.5KB。
• 用戶(hù)友好：提供可以根據(jù)喜好選擇的各種主題。
• 瀏覽器兼容性：適用于所有主流瀏覽器，如 Google Chrome、Mozilla Firefox、Opera、Safari 等 。
• 文檔完善：文檔包含要介紹的每個(gè)元素的樣本和示例。

圖片

Github：https://github.com/usablica/intro.js

shepherd

Shepherd 在 Github 上擁有 10.7k GitHub Star。它支持在多個(gè)前端框架中開(kāi)箱即用，包括 React、Vue、Angular 等。其具有以下特點(diǎn)：

• 輔助功能：提供鍵盤(pán)導(dǎo)航支持，遵循 a11y 規(guī)范，還可以使用 JavaScript 啟用 DOM 元素內(nèi)的焦點(diǎn)捕獲。
• 高度可定制：允許在不影響性能的情況下更改外觀。
• 框架支持：隨時(shí)融入項(xiàng)目的前端框架。
• 文檔完善：文檔涵蓋安裝和自定義，包括項(xiàng)目的主題和樣式。

圖片

• 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 在 GitHub 上擁有超過(guò) 5.1k Star，在 React 項(xiàng)目中開(kāi)箱即用，用于向現(xiàn)有用戶(hù)介紹新功能。其具有以下特點(diǎn)：

• 易于使用
• 高度可定制
• 文檔完善
• 積極維護(hù)

圖片

Github：https://github.com/gilbarbara/react-joyride

Vue Tour

Vue Tour 是一個(gè)輕巧、簡(jiǎn)單且可自定義的新手指引插件，可以與 Vue.js 一起使用。它提供了一種快速簡(jiǎn)便的方法來(lái)指導(dǎo)用戶(hù)使用應(yīng)用。它在 Github 上擁有 2.1 k Star。

圖片

Github：https://github.com/pulsardev/vue-tour

Reactour

Reactour 是一個(gè)用于創(chuàng)建 React 應(yīng)用導(dǎo)覽的流行庫(kù)。在 GitHub 上擁有 3.2K Star，它提供了一種簡(jiǎn)單的方式來(lái)引導(dǎo)用戶(hù)瀏覽網(wǎng)站和應(yīng)用。

圖片

Github：https://github.com/elrumordelaluz/reactour