vue项目引入fullpage：csdn-Vue中使用fullpage.js

1.问题描述：

vue的PC项目首页有个整屏滚动的效果，开始时还纠结用swiper还是fullpage，后来决定使用fullpage吧，毕竟它是专门实现整屏滚动的。我先把fullpage引入vue项目中，然后创建一个和首页平级的页面，便于我用vue-router先跳转进入这个demo，我好看看样子后再引入到要实现该效果的首页。过程中踩了几个坑，一度让我有些自闭了，看了多篇博文，为什么他们都是千篇一律的步骤，到我这儿就报错？
①Vue里报错：Maximum call stack size exceeded

②fullPage.js控制台licenseKey报错

③不知道fullpage如何监测当前处于第几页
④使用fullpage插件后，滚屏后导致首屏的视频不能正常播放

2.解决问题：

①直白点讲，我当时搞的demo页，组件命名是fullpage，和引入的fullpage插件命名冲突了，所以自己写demo页的话，暴露出来的组件名一定不能为fullpage【此处引入别的博主的解释：当前组件的名字不能和他使用其他组件注册的名字相同，不然这样会陷入死循环，所以js内存溢出了】。
参考链接：博客园-Vue里报错：Maximum call stack size exceeded
//示例

②因为官方是默认需要你的代码开源然后找他们要密钥或者购买才能使用。我们可以选择退而求其次把报错的这个方法改造一下。报错的是fullpage.js文件，在项目中找到该文件，搜索console.warn,然后第二个console.warn里最末尾Xn()这两个方法中括号中参数删除一下
参考链接：简书-fullPage.js控制台licenseKey报错

//代码

console.warn("%c This website was made using fullPage.js slider. More info on the following website:",t),console.warn("%c https://alvarotrigo.com/fullPage/",t)):(Xn(),Xn())

③使用fullpage提供的afterLoad参数，它的值是一个回调函数，滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数。我们在methods中进行事件处理，具体可以打印出来看一下。如果当前不是第一页，那么我想让头部导航定位在顶部，并且字体颜色和背景色都发生变化。
//示例

//代码

data() {
      return {
        options: {//整屏插件vue-fullpage选项
          licenseKey: null,
          //verticalCentered: true, //定义每一页的内容是否垂直居中
          afterLoad: this.afterLoad, //滚动到某一屏后的回调函数
          // scrollOverflow: true,//内容超过满屏后显示滚动条
          //controlArrows: true, //是否通过箭头控制slide幻灯片
          //loopHorizontal: true, //slide幻灯片是否循环滚动
          scrollBar: true, //true则是一滚动就是一整屏
          scrollingSpeed: 700,//页面滚动速度
          //onLeave: this.onLeave, //滚动前的回调函数，
        },
	},        
methods: {
      // fullPage回调函数，进行判断头部状态
      afterLoad(m,idx){
        if(idx.index != 0 ){
          this.headState = true;
        } else {
          this.headState = false;
        }
      },
    }     

④video标签中添加data-keepplaying
参卡链接：知乎-用了fullpage过后video标签的视频不能自动播放了？
//示例

//代码

<video data-keepplaying   preload="auto" poster="../../assets/images/home.png" muted="muted"
       loop="loop" autoplay="autoplay" playsinline="">
   <source  src="../../assets/background.mp4" type="video/mp4">
 </video>

//fullpageAPI文档
http://fullpage.81hu.com/

3.回顾问题

这次的项目是一个pc官网，它不像我以前做的一些简单的官网，只是把html、css、js、img等放在不同的文件夹下然后引入即可。这次是用vue框架并把整体的项目工程化了，可能第一次自己在vue项目中导入插件的缘故，踩了好多坑，让我感触颇深，让我对前端项目工程化有了个深刻的认识，考虑事情的角度也上了个维度。现在细想一下，其实也并不难，只是自己盲目在做的时候，有些因素没有考虑进去，导致最后自己把自己搞晕了，细细捋一遍后还是觉得很有意思，并且让我有很大的信心把之前做的官网也都改版一下。

题外话：我在项目中使用场景

我主要使用在首页实现一个首屏滚动的效果，fullpage还是很好上手，我相信如果你有比我扎实的基础，那么大概率应该不会翻阅到我这篇博客，如果你认真的看了我的博客并还解决了你的问题，然后还看到了最后这段结尾，那么我只想说路还长每一次的绊脚石都会成为你积累的经验。
最后我还想说一句↓

未来总是充满希望！ 加油。