nuxt.js项目使用swiper轮播插件具体步骤

一. 版本环境

项目是通过npx create-nuxt-app@2.9.2 projectName创建的

"nuxt":"^2.0.0","swiper":"^4.5.1","vue-awesome-swiper":"^4.1.1"

二. 代码部分

2.1 安装插件

npm install swiper@4.5.1 --save
npm install vue-awesome-swiper@4.1.1 --save

2.2 plugins文件夹创建swiper.js文件，内容如下

import Vuefrom'vue'import cssfrom'swiper/dist/css/swiper.css'import VueAwesomeSwiperfrom'vue-awesome-swiper'exportdefault()=>{
  Vue.use(VueAwesomeSwiper,{css})}

CSS样式文件的导入需要特别说一下，官网提示导入如下：

所以当前版本下（“swiper”: “^4.5.1”）我该这样导入import css from ‘swiper/css/swiper.css’，但是报错了，如下：

正确写法如下：

import cssfrom'swiper/dist/css/swiper.css'

2.3 在nuxt.config.js中配置插件

plugins:[{ src:"~/plugins/swiper.js", ssr:false},],

2.4 在components文件夹里面创建swiper.vue组件

<template><divclass="swiper-page"><div v-swiper:mySwiper="swiperOption"class="swiper-container"><divclass="swiper-wrapper"><divclass="swiper-slide" v-for="(item, idx) in swiperData":key="idx"><img:src="item.imgUrl"/></div></div><divclass="swiper-pagination swiper-pagination-style"></div></div></div></template><script>exportdefault{data(){return{
      swiperData:[{ imgUrl:require('../../static/images/index/banner@2x.png')},{ imgUrl:require('../../static/images/index/bg@2x.png')},{ imgUrl:require('../../static/images/index/bg1.png')},],
      swiperOption:{
        pagination:{
          el:'.swiper-pagination',
          bulletClass:'my-bullet-swiper',// 自定义设置默认类名
          bulletActiveClass:'my-bullet-active-swiper',// 自定义滑块活跃类名
          clickable:true,// 点击当前滑块切换到对应的轮播图片},
        autoplay:{
          delay:2000,},
        paginationClickable:true,
        speed:800,
        loop:true,
        observer:true,
        observeParents:true,
        autoplayDisableOnInteraction:false,},}},}</script><style lang="scss" scoped>.swiper-page{
  position: relative;.swiper-slide{
    width:760px;
    height:440px;// box-shadow: 0 0 30px 3px rgba(77, 97, 140, 0.4);
    img{
      width:760px;
      height:440px;}}.swiper-pagination-style{
    position: absolute;
    left:60px;
    bottom:39px;
    width:300px;
    @includeflexlayout(row, flex-start, center);.my-bullet-swiper{
      display: inline-block;
      width:46px;
      height:6px;
      background: #9b9bb6;
      margin-right:14px;}.my-bullet-active-swiper{
      background: #ffd18e;}}}</style>

2.5 在某个页面引入使用swiper组件

<template><divclass="content-swiper"><swiper-page></swiper-page></div></template><script>import swiperPagefrom'~/components/swiper.vue'exportdefault{
  name:"contentSwiper",
  components:{
    swiperPage,},}</script>

注意：此时会遇到一个问题，你会发现自定义滑块的样式不起作用

// 这个部分没效果<divclass="swiper-pagination swiper-pagination-style"></div>

原因： swiper分页是在mouted周期里操作DOM创建的，vue是不会帮你在创建的分页上加上scoped自定义属性的

方法：1. style标签去掉scoped。 2.在下面再写一个style标签且不带scoped属性

修改后成功使用，如下图：

注意：使用时一定要注意安装插件的版本，如果使用不起，很有可能是版本不匹配。

（完）