美文网首页
vue 配置插件

vue 配置插件

作者: 汀上 | 来源:发表于2020-02-25 12:48 被阅读0次

1.配置stylus

npm install stylus stylus-loader --save

//webpack.base.conf文件下rules添加

rules:[
      ...,
      {
        test: /\.styl$/,
        loader: 'style-loader!css-loader!stylus-loader'
      } ,
      ...
]

2.配置swiper(之前安装的3以上版本的,底部分页不出来,降一下版本就好了)

npm install vue-awesome-swiper --save //安装最新版

安装低版本
npm uninstall vue-awesome-swiper //如果安装了最新版先卸载
npm install vue-awesome-swiper@2.6.7 --save  //安装低版本,高版本兼容性有问题,建议安装此版本

//main.js里引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

//组件里引入
import { swiper, swiperSlide } from 'vue-awesome-swiper'

//data里return
 swiperOption: {         //swiper无缝滚动配置项
        notNextTick: true,
        direction:'vertical',
        speed:1500,//滚动速度
        setWrapperSize: true,
        freeMode:true,//true则是自由模式,不会自动贴合滑动位置
        autoplay:{
          delay:1,
          autoplayDisableOnInteraction:false
        },
        loop:true,//循环
        observer:true,//修改swiper自己或子元素时,自动初始化swiper 
       observeParents:true,//修改swiper的父元素时,自动初始化swiper  
        spaceBetween:4,//slide之间的距离(单位px)
        slidesPerView:6 //slide可见数量
 }
   

相关文章

网友评论

      本文标题:vue 配置插件

      本文链接:https://www.haomeiwen.com/subject/mvwzqhtx.html