大家好，我是若川。我持續組織了近一年的源碼共讀活動，感興趣的可以?點此掃碼加我微信?lxchuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信進群。
以下內容來自公眾號：前端充電寶，作者：?CUGGZ。
在產品發布新版本或者有新功能上線時，經常需要新手引導功能來引導用戶了解應用。下面就來分享幾個開箱即用的新手引導組件庫，幫你快速實現新手引導功能！
Intro.js
Intro.js 是一個使用廣泛的產品引導庫，它在 Github 上擁有 21.6k Star。其具有以下特點：
無依賴：它不需要任何其他依賴。
小而快：庫文件較小使得引導過程流暢直觀。JavaScript 文件的整體大小為 10KB，CSS 為 2.5KB。
用戶友好：提供可以根據喜好選擇的各種主題。
瀏覽器兼容性：適用于所有主流瀏覽器，如 Google Chrome、Mozilla Firefox、Opera、Safari 等 。
文檔完善：文檔包含要介紹的每個元素的樣本和示例。
可以通過以下命令來安裝 Intro.js：
npm?install?intro.js?-?save安裝完成后，只需三個簡單的步驟即可將其添加到項目中：
將 JavaScript 和 CSS 文件（intro.js 和 introjs.css）添加到項目中。
將 data-intro 和 data-step 屬性添加到相關的 HTML 元素。這將為特定元素啟用 intro.js。
調用以下 JavaScript 函數：
introJs().start();可以使用以下附加參數在特定元素或類上調用 Intro.js：
introJs(".introduction-farm").start();Github：https://github.com/usablica/intro.js
shepherd
Shepherd 在 Github 上擁有 10.7k GitHub Star。它支持在多個前端框架中開箱即用，包括 React、Vue、Angular 等。其具有以下特點：
輔助功能：提供鍵盤導航支持，遵循 a11y 規范，還可以使用 JavaScript 啟用 DOM 元素內的焦點捕獲。
高度可定制：允許在不影響性能的情況下更改外觀。
框架支持：隨時融入項目的前端框架。
文檔完善：文檔涵蓋安裝和自定義，包括項目的主題和樣式。
可以使用以下命令來安裝 shepherd.js：
npm?install?shepherd.js?-save
npm?install?react-shepherd?--save
npm?install?vue-shepherd?--save
npm?install?angular-shepherd?--save安裝完成之后，可以按如下方式來使用 shepherd（以 React 為例）：
import?React,?{?Component,?useContext?}?from?'react'
import?{?ShepherdTour,?ShepherdTourContext?}?from?'react-shepherd'
import?newSteps?from?'./steps'const?tourOptions?=?{defaultStepOptions:?{cancelIcon:?{enabled:?true}},useModalOverlay:?true
};function?Button()?{const?tour?=?useContext(ShepherdTourContext);return?(<button?className="button?dark"?onClick={tour.start}>Start?Tour</button>);
}class?App?extends?Component?{render()?{return?(<div><ShepherdTour?steps={newSteps}?tourOptions={tourOptions}><Button?/></ShepherdTour></div>);}
}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 上擁有超過 5.1k Star，在 React 項目中開箱即用，用于向現有用戶介紹新功能。其具有以下特點：
易于使用
高度可定制
文檔完善
積極維護
可以使用以下命令來安裝 react-joyride：
npm?i?react-joyride可以通過以下方式來在 React 中使用 react-joyride：
import?Joyride?from?'react-joyride';export?class?App?extends?React.Component?{state?=?{steps:?[{target:?'.my-first-step',content:?'This?is?my?awesome?feature!',},{target:?'.my-other-step',content:?'This?another?awesome?feature!',},...]};render?()?{const?{?steps?}?=?this.state;return?(<div?className="app"><Joyridesteps={steps}.../>...</div>);}
}Github：https://github.com/gilbarbara/react-joyride
Vue Tour
Vue Tour 是一個輕巧、簡單且可自定義的新手指引插件，可以與 Vue.js 一起使用。它提供了一種快速簡便的方法來指導用戶使用應用。它在 Github 上擁有 2.1 k Star。
可以通過以下命令來安裝 Vue Tour：
npm?install?vue-tour然后在應用入口導入插件（如果使用 vue-cli 搭建項目，通常是 main.js），并在 Vue 中注冊它。可以添加默認提供的樣式或根據自己的喜好自定義它們。
import?Vue?from?'vue'
import?App?from?'./App.vue'
import?VueTour?from?'vue-tour'require('vue-tour/dist/vue-tour.css')Vue.use(VueTour)new?Vue({render:?h?=>?h(App)
}).$mount('#app')最后將 v-tour 組件放入模板中的任何位置（通常在 App.vue 中），并向其傳遞一系列步驟。每個步驟的 target 屬性可以將應用的任何組件中的 DOM 元素作為 target（只要在相關步驟彈出時它存在于 DOM 中）。
<template><div><div?id="v-step-0">A?DOM?element?on?your?page.?The?first?step?will?pop?on?this?element?because?its?ID?is?'v-step-0'.</div><div?class="v-step-1">A?DOM?element?on?your?page.?The?second?step?will?pop?on?this?element?because?its?ID?is?'v-step-1'.</div><div?data-v-step="2">A?DOM?element?on?your?page.?The?third?and?final?step?will?pop?on?this?element?because?its?ID?is?'v-step-2'.</div><v-tour?name="myTour"?:steps="steps"></v-tour></div>
</template><script>export?default?{name:?'my-tour',data?()?{return?{steps:?[{target:?'#v-step-0',??//?We're?using?document.querySelector()?under?the?hoodheader:?{title:?'Get?Started',},content:?`Discover?<strong>Vue?Tour</strong>!`},{target:?'.v-step-1',content:?'An?awesome?plugin?made?with?Vue.js!'},{target:?'[data-v-step="2"]',content:?'Try?it,?you\'ll?love?it!<br>You?can?put?HTML?in?the?steps?and?completely?customize?the?DOM?to?suit?your?needs.',params:?{placement:?'top'?//?Any?valid?Popper.js?placement.?See?https://popper.js.org/popper-documentation.html#Popper.placements}}]}},mounted:?function?()?{this.$tours['myTour'].start()}}
</script>Github：https://github.com/pulsardev/vue-tour
Reactour
Reactour 是一個用于創建 React 應用導覽的流行庫。在 GitHub 上擁有 3.2K Star，它提供了一種簡單的方式來引導用戶瀏覽網站和應用。
可以通過以下命令來安裝 reactour：
npm?i?-S?@reactour/tour安裝完成之后，在應用的根組件添加 TourProvider，傳遞元素的步驟以在瀏覽期間突出顯示：
import?{?TourProvider?}?from?'@reactour/tour'ReactDOM.render(<TourProvider?steps={steps}><App?/></TourProvider>,document.getElementById('root')
)const?steps?=?[{selector:?'.first-step',content:?'This?is?my?first?Step',},//?...
]然后在應用樹中的某個地方，使用 useTour hook 來控制 Tour：
import?{?useTour?}?from?'@reactour/tour'function?App()?{const?{?setIsOpen?}?=?useTour()return?(<><p?className="first-step">Lorem?ipsum?dolor?sit?amet,?consectetur?adipiscing?elit.?Praesent?atfinibus?nulla,?quis?varius?justo.?Vestibulum?lorem?lorem,?viverra?portametus?nec,?porta?luctus?orci</p><button?onClick={()?=>?setIsOpen(true)}>Open?Tour</button></>)
}Github：https://github.com/elrumordelaluz/reactour
