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

Question

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

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

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

有人能帮助我吗？

在常规HTML用法中，我只是在结束body标签之前做script标签（为了用户体验）。 我能够将scripts.js加载到Vue.js 2.0框架中，但是一旦将所有内容移至Nuxt.js，并尝试使其适应Nuxt.js，除scripts.js文件外，其他所有内容都可以正常工作。

Answer 1

[解决了]！

我想到了！ 由于Nuxt.js文档根本对我没有帮助，因此我不得不参考Vue.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 }">

在那之后，一切都运转良好！

Answer 2

Nuxt v1.4.0文档中的官方指南在这里： https ://nuxtjs.org/faq/window-document-undefined#window-or-document-undefined-

如果需要指定仅在客户端上导入资源，则需要使用process.browser变量。

例如，在您的.vue文件中：

 if (process.browser) { require('external_library') } 

如果要在多个文件中使用此库，建议您通过nuxt.config.js将其添加到供应商捆绑包中：

 build: { vendor: ['external_library'] }