vue 配置插件

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以上版本的,底部分頁(yè)不出來(lái),降一下版本就好了)

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

安裝低版本
npm uninstall vue-awesome-swiper //如果安裝了最新版先卸載
npm install vue-awesome-swiper@2.6.7 --save  //安裝低版本,高版本兼容性有問(wèn)題,建議安裝此版本

//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無(wú)縫滾動(dòng)配置項(xiàng)
        notNextTick: true,
        direction:'vertical',
        speed:1500,//滾動(dòng)速度
        setWrapperSize: true,
        freeMode:true,//true則是自由模式,不會(huì)自動(dòng)貼合滑動(dòng)位置
        autoplay:{
          delay:1,
          autoplayDisableOnInteraction:false
        },
        loop:true,//循環(huán)
        observer:true,//修改swiper自己或子元素時(shí),自動(dòng)初始化swiper 
       observeParents:true,//修改swiper的父元素時(shí),自動(dòng)初始化swiper  
        spaceBetween:4,//slide之間的距離(單位px)
        slidesPerView:6 //slide可見(jiàn)數(shù)量
 }
   

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容