1、创建分支
首先在码云里“我的码云”下,点击创建的项目,进入项目,点击x个分支,在右上角点击新建分支,输入分支名称如:index-swiper,点击创建分支
2、在本地更新分支
这时候线上仓库有了index-swiper分支,但是本地仓库还没有,所以进入项目所在文件夹,点击右键git Bash Here,然后输入git pull这样本地仓库也有了index-swiper分支,输入git checkout index-swiper回车,那么现在本地所在的分支就是index-swiper,可以通过git status查看所在分支
这时候我们写代码就是在index-swiper分支上写的
3、在终端输入npm run start,然后运行http://localhost:8080查看页面
4、下载轮播插件
进入https://github.com/输入vue-awesome-swiper,进入surmon-china/vue-awesome-swiper,
安装方法:
ctrl+c退出当前运行状态,clear清除控制台,输入
npm install vue-awesome-swiper --save
因为最新版本可能有些不稳定,所以有时候我们会安装之前的版本如:
npm install vue-awesome-swiper@2.6.7 --save
在全局使用轮播,在main.js文件引用相关文件:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper) //使用插件
5、新建一个swiper.vue的文件
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide><img class="swiper-img" src="img/s1.jpg" /></swiper-slide>
<swiper-slide><img class="swiper-img" src="img/s2.jpg" /></swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default{
name: 'HomeSwiper',
data: function () {
return {
swiperOption:{}
}
}
}
</script>
//lang="stylus"设置语言,用的是stylus语法,scoped限制样式只用于本文件
<style lang="stylus" scoped>
</style>
lang="stylus"设置语言,用的是stylus语法,scoped限制样式只用于本文件
子组件定义data时,必须是一个函数
注意这时候的图片宽高是不完全的,所以给img添加一个class,swiper-img,设置.swiper-img{width:100%;}
如果直接把swiper放到template下面,那么首页引用swiper.vue组件时,其后紧跟的部分会出现抖动,所以,给swiper添加高度防止抖动,其中,我的图片宽高比640*200,大约26.67,宽度 width:100%,那么高度相对于宽度会撑起26.67%(200/750),这样宽高比始终保持在26.67%
<style lang="stylus" scoped>
.wrapper
overflow: hidden
width: 100%
height:0
padding-bottom:26.67%
.swiper-img
width: 100%
</style>
下面做一些优化:swiper里的图片可以在data里面定义:然后在组件里循环使用(最终版本)
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default{
name: 'HomeSwiper',
data: function () {
return {
swiperOption:{
pagination:'.swiper-pagination', //组件下面的小圆点
loop:true //支持轮播组件循环播放
},
swiperList: [{
id: '001',
imgUrl: 's1.jpg'
},{
id: '002',
imgUrl:'s2.jpg'
}]
}
}
}
</script>
<style lang="stylus" scoped >
//因为scoped的作用是样式只作用于本组件,所以直接使用.swiper-pagination-bullet-active修改样式是不行的,因为swiper插件相当于另一个组件,所以使用>>>,这个是样式穿透,可以让scope样式作用于其他组件
.wrapper >>> .swiper-pagination-bullet-active //改变小圆点的样式
background: #fff
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.67%
background: #eee
.swiper-img
width: 100%
</style>
6、定义好子组件后在首页引用定义好的HomeSwiper组件,
<template>
<div>
<home-swiper></home-swiper> //使用组件
</div>
</template>
<script>
import HomeSwiper from './components/Swiper'; //引用组件
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper //注册组件
},
};
</script>
在home.vue引用swiper.vue子组件
7、保存到本地仓库并提交到线上仓库
git add .
git commit -m 'swiper'
git push
在线上把index-swiper分支合并到master
git checkout master
git merge origin/index-swiper
git push