家好，我是 Echa。

在產品發布新版本或者有新功能上線時，經常需要新手引導功能來引導用戶了解應用。下面就來分享幾個開箱即用的新手引導組件庫，幫你快速實現新手引導功能！

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

安裝完成后，只需三個簡單的步驟即可將其添加到項目中：

1. 將 JavaScript 和 CSS 文件（intro.js 和 introjs.css）添加到項目中。
2. 將 data-intro 和 data-step 屬性添加到相關的 HTML 元素。這將為特定元素啟用 intro.js。
3. 調用以下 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">
        <Joyride
          steps={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 hood
            header: {
              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 at
        finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
        metus nec, porta luctus orci
      </p>
      <button onClick={()=> setIsOpen(true)}>Open Tour</button>
    </>
  )
}

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

何在vue項目中使用用intro.js新手引導功能呢?這里需要使用到vue-introjs插件，vue-introjs是在Vue中綁定intro.js所使用的。在使用vue-introjs前，需要先安裝intro.js

npm安裝

npm i intro.js --save
npm i vue-introjs --save

webpack配置

// webpack.config.js
{
    plugins: [
        new webpack.ProvidePlugin({
            // other modules
            introJs: ['intro.js']
        })
    ]
}

如果是vue-cli3的項目，則在vue.config.js

chainWebpack: config=> {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      // other modules
      introJs: ['intro.js']
    }])    
}

main.js中引入

在webpack中配置后，webpack.ProvidePlugin將會使用它，所以不需要在main.js中使用import introJs from ‘intro.js’來引用

import VueIntro from 'vue-introjs';
import 'intro.js/introjs.css';
Vue.use(VueIntro);

頁面中使用

需要在頁面渲染完成后，使用

mounted: function () {
  this.setGuide();
},
methods: {
  setGuide() {
    let data=[
      {element: '.step_1',intro: '步驟1：對應class為.step_1的元素進行選擇提示。',position: 'right'},
      {element: '#step_2',intro: '步驟2：對應Id為#step_2的元素進行選擇提示。',position: 'left'},
    ]
    this.$intro().setOptions({
      prevLabel: "上一步",
      nextLabel: "下一步",
      skipLabel: "跳過",
      doneLabel: "完成",
      steps:steps
    }).oncomplete(()=> {
      //點擊結束按鈕后執行的事件
    }).onexit(()=> {
      //點擊跳過按鈕后執行的事件
    }).start()
  },
}

如果不想使用steps的方式，我們可以直接在html中通過指令的方式來使用，html如下：

<div v-intro="'這是步驟1的引導提示內容'" v-intro-step="1"></div>
<div v-intro="'這是步驟2的引導提示內容'" v-intro-step="2"></div>

setOption關鍵字

主要參數如下：

prevLabel: "上一步", 
nextLabel: "下一步",
skipLabel: "跳過",
doneLabel: "結束",
tooltipPosition: 'bottom',/* 引導說明框相對高亮說明區域的位置 */
tooltipClass: '', /* 引導說明文本框的樣式 */
highlightClass: '', /* 說明高亮區域的樣式 */
exitOnEsc: true,/* 是否使用鍵盤Esc退出 */
exitOnOverlayClick: true,/* 是否允許點擊空白處退出 */
showStepNumbers: true,/* 是否顯示說明的數據步驟*/
keyboardNavigation: true,/* 是否允許鍵盤來操作 */
showButtons: true,/* 是否按鍵來操作 */
showBullets: true,/* 是否使用點點點顯示進度 */
showProgress: false,/* 是否顯示進度條 */
scrollToElement: true,/* 是否滑動到高亮的區域 */
overlayOpacity: 0.8, /* 遮罩層的透明度 */
positionPrecedence: ["bottom", "top", "right", "left"],/* 當位置選擇自動的時候，位置排列的優先級 */
disableInteraction: false, /* 是否禁止與元素的相互關聯 */
hintPosition: 'top-middle', /* 默認提示位置 */
hintButtonLabel: 'Got it',/* 默認提示內容 */

更多詳細的使用此處不再贅述，vue-introjs的github地址：https://github.com/alex-oleshkevich/vue-introjs。

<body>
 <nav class="zone bluesticky">
 <ulclass="main-nav">
 <li><ahref="">About</a></li>
 <li><ahref="">Products</a></li>
 <li><ahref="">Our Team</a></li>
 <liclass="push"><ahref="">Contact</a></li>
 </ul>
 </nav>
 <div>
 <imgsrc="img/cover.jpg">
 <divclass="coverText"><h1>Making the world a betterplace</h1></div>
 </div>
 <div class="zone bluegrid-wrapper">
 <div>
 <imgsrc="./img/teamplay.jpg">
 <divclass="text">
 <h1>Teamplay</h1>
 <p>We work togetherto create impact</p>
 <button>Learn more</button>
 </div>
 </div>
 <div><img src="./img/strategy.jpg">
 <divclass="text">
 <h1>Strategy</h1>
 <p>Every goal is partof our strategy</p>
 <button>Learn more</button>
 </div>
 </div>
 <div><img src="./img/innovation.jpg">
 <divclass="text">
 <h1>Innovation</h1>
 <p>We're focused onthinking different</p>
 <button>Learnmore</button>
 </div>
 </div>
 </div>
 <footerclass="zone"><p>
2019 Assaf Elovic All right reserved.
Formore articles visit
<ahref="www.assafelovic.com">
www.assafelovic.com</a></p></footer>
</div>
</body>

.main-nav {
 display: flex;
 list-style: none;
 margin: 0;
 font-size: 0.7em;
}

@media only screen and (max-width: 600px) {
 .main-nav {
 font-size: 0.5em;
 padding: 0;
 }
}

.push {
 margin-left: auto;
}

.sticky {
 position: fixed;
 z-index: 1;
 top: 0;
 width: 100%;
}

.container {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

.coverText {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 color: white;
 font-weight: bold;
}

.grid-wrapper {
 display: grid;
 grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
 grid-gap: 10px;
}

.card {
 background-color: #444;
 margin: 50px;
}

.card > img {
 max-width: 100%;
 height: auto;
}.card h1 {
 font-size: 1.5rem;
}.card p {
 font-size: 1rem;
}

.card > .text {
 padding: 0 20px 20px;
}

button {
 cursor: pointer;
 background: gray;
 border: 0;
 font-size: 1rem;
 color: white;
 padding: 10px;
 width: 100%;
}button:hover {
 background-color: #e0d27b;
}

footer {
 text-align: center;
 padding: 3px;
 background-color: #30336b;
}footer p {
 font-size: 1rem;
}