vue 使用VueFullPage

VueFullPage 是一个基于 Vue.js 的全屏滚动插件，可以实现页面的垂直滚动效果。它提供了丰富的配置选项，可以自定义滚动速度、滚动方向、滚动效果等。

使用 VueFullPage 需要先安装它。可以通过 npm 或者 yarn 进行安装：

npm install vue-fullpage

然后，在你的 Vue 组件中引入并注册 VueFullPage：

import VueFullPage from 'vue-fullpage';

export default {
  components: {
    VueFullPage
  },
  // ...
}

接下来，在模板中使用 VueFullPage 组件，并配置需要滚动的页面内容：

<template>
  <div>
    <vue-fullpage>
      <section class="section">Page 1</section>
      <section class="section">Page 2</section>
      <section class="section">Page 3</section>
    </vue-fullpage>
  </div>
</template>

你可以在每个 section 中添加自己的内容，这些内容将会作为滚动的页面显示出来。

除了基本的页面配置外，VueFullPage 还提供了一些可选的配置选项，例如滚动速度、滚动方向、滚动效果等。你可以在 VueFullPage 组件中通过 props 来配置这些选项：

<template>
  <div>
    <vue-fullpage :options="fullpageOptions">
      <section class="section">Page 1</section>
      <section class="section">Page 2</section>
      <section class="section">Page 3</section>
    </vue-fullpage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullpageOptions: {
        scrollingSpeed: 1000, // 滚动速度，单位为毫秒
        verticalCentered: true, // 是否垂直居中
        anchors: ['page1', 'page2', 'page3'], // 锚点，用于定位到指定页面
        // 更多配置选项...
      }
    };
  }
};
</script>

以上就是使用 VueFullPage 的基本步骤和配置方法。通过配置选项，你可以根据自己的需求来定制滚动效果、页面布局等