nuxt 使用 vue-awesome-swiper
时间: 2023-05-29 21:05:06 浏览: 333
vue-awesome-swiper:NuxtJs中的vue-awesome-swiper示例
要在 Nuxt 中使用 vue-awesome-swiper,你需要执行以下步骤:
1. 安装依赖:
```bash
npm install vue-awesome-swiper swiper --save
```
2. 在 nuxt.config.js 中添加 CSS 和插件:
```javascript
// nuxt.config.js
module.exports = {
css: [
'swiper/dist/css/swiper.css'
],
plugins: [
{ src: '~/plugins/vue-awesome-swiper', ssr: false }
]
}
```
3. 创建一个 plugins/vue-awesome-swiper.js 文件并添加以下代码:
```javascript
// plugins/vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
```
4. 在你的组件中使用 swiper:
```vue
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
export default {
data () {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
},
mounted () {
this.$nextTick(() => {
this.$refs.mySwiper.swiper.init()
})
}
}
</script>
```
以上是在 Nuxt 中使用 vue-awesome-swiper 的基本步骤。你可以根据需要配置选项并添加更多的滑块。
阅读全文