在vue-cli项目中如何使用swiper
作者：吴莉
这篇文章主要介绍了在vue-cli项目中如何使用swiper问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
在vue-cli项目中使用使用swiper
第一步
切换进项目 安装swiper
npm install swiper --save-dev
第二步
创建组件 swiper.vue
导入
import Swiper from "swiper"; @import 'swiper/dist/css/swiper.css';
完整swiper.vue组件
<template> <div> <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> </div> </template>
<script>
import Swiper from "swiper";
export default{
name:"swiper",
mounted(){
var mySwiper = new Swiper ('.swiper-container', {
})
}
}
</script><style>
@import 'swiper/dist/css/swiper.css';
.swiper-container {
width: 600px;
height: 300px;
}
</style>在vue-cli中使用swiper制作水平滑动
在最近项目中，需要完成一个水平滑动选项卡的选择，如果在uni-app中可以直接使用swiper组件完成，但是在vue-cli项目中需要进入swiper插件；但是swiper官网中对于其在vue-cli项目中的使用介绍描述的不太详细，下面将我的使用过程记录下来供大家参考。
1.引入npm install swiper vue-awesome-swiper --save
2.（全局注册）
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 如果引入版本 (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// 如果引入版本 (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)3.页面内注册：
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"; //轮播插件
import "swiper/swiper-bundle.css";
components: {
Swiper,
SwiperSlide,
},
directives: {
swiper: directive,
},4.template文件：
<div class="swiper-container" v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide">
//单个选项卡内容
</div>
</div>
</div>5.js文件
export default{
data(){
swiperOption: {
slidesPerView: 4,//配置每列显示几个选项卡，如果为4，代表100%宽度下会显示4张选项卡，第五个选项需要滑动才能看到
// ...其他配置项参考swiper中文网
},
}
}此时，页面中的选项卡就可以水平滚动该插件也可以用来做滚动导航Nav，如图：
结束！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。