npm - 如何用vuejs和nuxtjs安装flickity carousel

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>

但它显示未定义窗口

我已经用另一个组件(如 google map)尝试了这个，它显示了同样的错误。

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

谢谢。

Answer 1

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

您需要做的是使用 built-in no-ssr component以防止 Nuxt.js 在服务器端呈现它。

你可以简单地这样做:

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

UPDATE: If you still get an error at this point, then load Flickity ina custom Plugin that you will load with ssr disabled

创建一个名为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
}

这已经过测试，现在可以正常工作了。