我是一名新的 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)尝试了这个,它显示了同样的错误。
请告诉我我做错了什么以及如何将新组件安装到项目中。
谢谢。
最佳答案
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 in a 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
}
这已经过测试,现在可以正常工作了。
关于npm - 如何用vuejs和nuxtjs安装flickity carousel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47298588/