如何将客户端脚本添加到 Nuxt.js？

Question

我一直在阅读 Nuxt.js 关于插件的文档和用于添加脚本的配置 nuxt 文件。我尝试了两者，但没有运气。

我正在尝试添加以下代码（位于/static/js/scripts.js）：

 $(window).scroll(function(){
     if ($(window).scrollTop() >= 200) {
        $('nav').addClass('fixed-header');
     }
     else {
        $('nav').removeClass('fixed-header');
     }
 });

有人能帮助我吗？

在常规的 HTML 使用中，我只是在结束正文标记之前执行脚本标记（为了用户体验）。我能够scripts.js在 Vue.js 2.0 框架中加载 ，但是一旦我将所有内容都移到 Nuxt.js，并尝试将其调整到 Nuxt.js，除了scripts.js文件之外，其他所有内容都可以正常工作。

Answer 1

[解决了]！

我想到了！我不得不参考 Vue.js 文档，因为 Nuxt.js 文档根本没有帮助我。

所以我基本上进入了包含导航栏的 vue 文件，我希望该类根据滚动切换出现。我还必须修改 javascript 以便它对 ESLINT 友好......所以下面的代码相当于我在我的问题中写的代码。

<script>
export default {
  name: 'MainNav',
  data: function () {
    return {
      fixedOnScroll: false
    }
  },
  methods: {
    handleScroll () {
      if (window.scrollY >= 200) {
        this.fixedOnScroll = true
      } else {
        this.fixedOnScroll = false
      }
    }
  },
  created () {
    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
    }
  },
  beforeUpdate () {
    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
    }
  }
}
</script>

一旦解决了这个问题，我就必须在同一个文件的模板标签中使用 vue 绑定类。

<nav class = "navbar-expand-lg text-center" v-bind:class="{ 'fixed-header': fixedOnScroll }">

之后一切正常！