Javascript 使用带有vue.js的航路点时出现问题

我使用的是vue.js，我想包括

航路点

我的原创、工作、剧本：

html:

css:

我试图在vue.js中使用此代码，但它在控制台中给了我以下消息：

未捕获参考错误：未定义航路点

这是vue.js中的代码：

galeri.vue：

<template>
  <div id="final">
    <h2>Mostar el mensaje al pasar por aqui</h2>
  </div>
</template>
<script>
  var ele
  var waypoint = new Waypoint({
    element: ele = document.getElementById('final'),
    handler: function(direction) {
      if (direction == 'down') {
        $(ele).addClass('muestra')
      } else {
        $(ele).removeClass('muestra')
      }
      console.log(direction);
    }
  });
</script>

Mostar el mensaje al-pasar por aqui
瓦勒
var航路点=新航路点({
元素：ele=document.getElementById（'final'），
处理程序：函数（方向）{
如果（方向==“向下”）{
$（ele.addClass（'muestra'））
}否则{
$（ele.removeClass（'muestra'））
}
控制台日志（方向）；
}
});

---

知道我做错了什么吗

由于您通过

npm安装航路点
安装了航路点，因此您需要
在文件中要求它，如下所示：

<script>
require('waypoints/lib/noframework.waypoints.js')

var waypoint = new Waypoint({ 
  // ... 
})
</script>


require（'waypoints/lib/noframework.waypoints.js'）
var航路点=新航路点（{
// ... 
})

您需要将航路点导入文件I使用-npm安装航路点将航路点导入项目
.muestra {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

<template>
  <div id="final">
    <h2>Mostar el mensaje al pasar por aqui</h2>
  </div>
</template>
<script>
  var ele
  var waypoint = new Waypoint({
    element: ele = document.getElementById('final'),
    handler: function(direction) {
      if (direction == 'down') {
        $(ele).addClass('muestra')
      } else {
        $(ele).removeClass('muestra')
      }
      console.log(direction);
    }
  });
</script>

<script>
require('waypoints/lib/noframework.waypoints.js')

var waypoint = new Waypoint({ 
  // ... 
})
</script>