如何使用vuejs和nuxtjs安装flickity旋转木马

Question

我是一个新的vuejs开发人员。我学习vueje有一段时间了，现在我决定用vuejs开发一个项目。

因此，我了解了nuxtjs，它是服务器端呈现。万事如意。我可以在我的项目中使用bootstrap4。

现在我想在我的项目中使用flickity旋转木马https://flickity.metafizzy.co，我发现https://github.com/drewjbartlett/vue-flickity上有一个vuejs包。

我按照指导如何将此组件安装到我的项目中

npm install vue-flickity --save

然后加上一些代码

<script>
  import Logo from '~/components/Logo.vue'
  import Searchbar from '~/components/Searchbar.vue'
  import axios from 'axios'
  import Flickity from 'vue-flickity';

  export default {
    data () {
      return {
        has_location: false,
        flickityOptions: {
          initialIndex: 3,
          prevNextButtons: false,
          pageDots: false,
          wrapAround: true
        }
      }
    },
    components: {
      Logo,
      Searchbar,
      Flickity
    }
  }
</script>

但是它显示窗口没有被定义为

​

​

我已经尝试了另一个组件，如谷歌地图，它显示了同样的错误。

请告诉我，我做错了什么，以及如何安装新的组件的项目。

谢谢。

Answer 1

Nuxt.js使用SSR呈现网站服务器端，因此window对象在node.js环境下不可访问。

您需要做的是使用组件来防止Nuxt.js在服务器端呈现它。

您可以简单地这样做：

<no-ssr>
  <Flickity :options="...">
    <!-- slides -->
  </Flickity>
</no-ssr>

更新:如果此时仍有错误，则在禁用ssr的自定义插件中加载Flickity

创建一个名为plugins/VueFlickity.js的文件

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('Flickity', Flickity)

然后在您的nuxt.config.js中添加：

module.exports = {
  // ...
  plugins: [
    { src: '~/plugins/VueFlickity.js', ssr: false }
  ]
}

不要忘记删除Flickity本地组件注册：

components: {
  Logo,
  Searchbar
  // Flickity <-- remove this line
}

这是经过测试的，现在正在充分发挥作用。

Answer 2

我用：

let Flickity = {};
if (process.browser) {
    Flickity = require('flickity.js');
}

Answer 3

@rayfranco指出了一个很好的方法。：)通过这样做，您可以在全球范围内导入这个插件，而不是作为性能更好的本地组件导入。所以你也可以这样做：

let Flickity;

if (process.client) {
     Flickity = require('vue-flickity')
}

      
export default {
    components: {
       Flickity
    } 
}

并以这种方式使用此组件：

重要事项:在Nuxt > 2.9中不推荐<no-ssr>......</no-ssr>，所以请使用

<client-only>
  <Flickity :options="...">
    <div class="carousel-cell">1</div>
    <div class="carousel-cell">2</div>
    <div class="carousel-cell">3</div>
  </Flickity>
</client-only>

您还可以查看Josh Deltener https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/的简短示例。