SpringBoot之Vue安装幻灯片插件

SpringBoot之Vue安装幻灯片插件

前台项目使用了nuxt模板，但这个模板没有Element组件，所以需要引入

Nuxt官网

1.安装插件

npm install vue-awesome-swiper

2. 新建nuxt-swiper-plugin.js，并放入内容

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

3.在 nuxt.config.js 文件中配置插件

plugins: [
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
  ],
  css: [
    'swiper/dist/css/swiper.css'
  ],

4.在assets下引入自己需要的静态资源

5.在页面中加入幻灯片

	<div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
          </a>
        </div>
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img src="~/assets/photo/banner/153525d0ef15459596.jpg" alt="首页banner">
          </a>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-white"/>
      <div slot="button-prev" class="swiper-button-prev swiper-button-white"/>
      <div slot="button-next" class="swiper-button-next swiper-button-white"/>
    </div>

<script>
export default {
	data () {
		return {
			swiperOption: {
				//配置分页
				pagination: {
					el: '.swiper-pagination'//分页的dom节点
				},
				//配置导航
				navigation: {
					nextEl: '.swiper-button-next',//下一页dom节点
					prevEl: '.swiper-button-prev'//前一页dom节点
				}
			}
		}
	}
}
</script>