如何在Nuxt.js（Vue.js）中使用vue

我在Nuxt.js（Vue.js）开发Web应用程序

首先，vue init nuxt/express MyProject

〜页/ help.vue

<template>
  <div>
    <p v-for="item in list">
      Line:
      <span v-text="item"></span>
    </p>
    <infinite-loading :on-infinite="onInfinite" spinner="bubbles" ref="infiniteLoading"></infinite-loading>
   </div>
</template>
<script>
let InfiniteLoading = require('vue-infinite-loading')
export default {
  ...
  components: {
    InfiniteLoading
  },
  methods: {
    onInfinite: function () {
      setTimeout(() => {
      const temp = []

      for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          temp.push(i)
        }
      this.list = this.list.concat(temp)
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
      }, 1000)
    }
  }
} 
</script>

并且，从'/ home'移动到'/ help'

窗口未定义

所以，我尝试了以下内容

let InfiniteLoading;
if (process.BROWSER_BUILD) {
  InfiniteLoading = require('vue-infinite-loading')
}

结果，

无法安装组件：模板或渲染函数未定义。（在InfiniteLoading中找到）

我已经尝试过nuxt.js文档方法。但是，我无法解决它。我想找到一个更准确的答案。

帮帮我，谢谢。

只是自己做了，就像一个魅力。在https://guessthatshit的评论部分看到它

安装：

npm install vue-infinite-scroll --save

在plugins目录中创建文件vue-infinite-scroll.js：

import Vue from 'vue'
import InfiniteScroll from 'vue-infinite-scroll'

Vue.use(InfiniteScroll);

更新nuxt.config.js以包含以下条目：

plugins: [
    {src: '~plugins/vue-infinite-scroll.js', ssr: false}
],

提示：不要忘记正确设置infinite-scroll-disabled =“autoLoadDisabled”，否则你可能会垃圾邮件加载你的加载功能。

我也认识到（仅限于nuxt生产，而不是开发）HTML是在变量通过“props：['commentsData']，”分配之前编写的。因此，在存在某个变量之前会触发自动滚动功能。解决这个问题：

    computed: {
        autoLoadDisabled() {
            return this.loading || thismentsData.length === 0;
        },
    },