首页 文章

如何使用vuejs和nuxtjs安装flickity轮播

提问于
浏览 次
1

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

所以我了解了服务器端渲染的nuxtjs . 一切顺利 . 我可以在我的项目中使用bootstrap4 .

现在我想在我的项目中使用flickity carousel 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>

但它显示 window is not defined

enter image description here

我尝试使用谷歌 Map 等其他组件，它显示相同的错误 .

请告诉我我做了什么错误以及如何在项目中安装新组件 .

谢谢 .

npm vue.js

2 回答

  • 2

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

    您需要做的是使用built-in no-ssr component来阻止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
}

    这已经过测试，现在已经完全正常运行

    回复于
  • 0

    有多种方法可以解决这个问题 - 无需在此处编写所有内容，请查看我编写的文章，该文章使用Nuxt插件系统来解决此特定问题：https://jason-awbrey.com/blog/creating-a-nuxt-plugin-get-past-window-undefined-issue-with-3rd-party-libraries

    希望能帮助到你！

    回复于

相关问题