通常，在产品发布新版本或许有新功用上线时，都会开发一个新手引导功用来引导用户了解运用的功用。在前端开发中，如何快速地开发新手引导功用呢，下面介绍几个开箱即用的新手引导组件库。

1，Intro.js

Intro.js是一个运用广泛的产品引导库，在Github上具有超越21.7k的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 函数，发动Intro.js。

introJs().start();

然后，运用以下附加参数在特定元素或类上调用 Intro.js发动。

introJs(".introduction-farm").start();

项目链接：github.com/usablica/in…

2，Shepherd

Shepherd是一个前端JavaScript引导库，在Github上具有10.8kGitHub Star，支撑在 React、Vue、Angular 等多个前端结构中开箱即用，其具有以下特色：

辅佐功用：供给键盘导航支撑，遵循 a11y 标准，还能够运用 JavaScript 启用 DOM 元素内的焦点捕获。
高度可定制：答应在不影响性能的情况下更改外观。
结构支撑：随时融入项目的前端结构。
文档完善：文档涵盖装置和自定义，包含项目的主题和样式。

运用Shepherd之前，咱们能够运用以下指令来装置 shepherd.js。

npm install shepherd.js -save
npm install react-shepherd --save
npm install vue-shepherd --save
npm install angular-shepherd --save

装置完结之后，咱们需求运用shepherd组件来嵌套引导页面。

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>
    );
  }
}

为了支撑React、Vue、Angular等不同的结构，Shepherd供给了不同的地址：

shepherd：github.com/shipshapeco…
react-shepherd：github.com/shipshapeco…
vue-shepherd：github.com/shipshapeco…
angular-shepherd：github.com/shipshapeco…

3，React Joyride

React Joyride 是一款用于向用户介绍新功用的React项目新手引导库，在GitHub上具有超越5.1k的Star，具有以下特色：

易于运用
高度可定制
文档完善
活跃维护

在项目中运用 react-joyride之前，需求运用以下指令来装置 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.com/gilbarbara/…

4，Vue Tour

Vue Tour是一个轻巧、简略且可自定义的新手指引组件，专门为Vue.js 定制，它供给了一种快速简便的方法来指导用户运用运用，现在它在 Github 上具有 2.12k Star。

首先，咱们需求经过以下指令来装置Vue Tour。

npm install vue-tour

然后，在运用入口文件（通常是 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。

<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.com/pulsardev/v…

5，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.com/elrumordela…

前端开发如何做新手引导

1，Intro.js

2，Shepherd

3，React Joyride

4，Vue Tour

5，Reactour

作者信息

前端开发如何做新手引导

1，Intro.js

2，Shepherd

3，React Joyride

4，Vue Tour

5，Reactour

相关文章

大数据培训十大Hive调优技巧

android kotlin 协程(五) suspend与continuation

CUDA入门教程；Transformer太火不是好事？；探求GPU极限性能的利器｜AI系统前沿动态

2022循序实战基于Vite的vue3组件库

作者信息