vue项目 首页开发 part2

知识点回顾

git clone： 从远程服务器克隆一个一模一样的版本库到本地,复制的是整个版本库，

叫做clone.（clone是将一个库复制到你的本地，是一个本地从无到有的过程）

1. 创建分支

进度：头部做好了，现在做头部下面的轮播图

因为是开发首页的第二个组件，所以我们可以git云仓库再建一个分支

git pull 把线上的分支拉到本地

从远程服务器获取到一个branch分支的更新到本地，并更新本地库，叫做pull.
（pull是指同步一个在你本地有版本的库内容更新的部分到你的本地库）

 

git checkout index-swiper  切换到指定分支

//分支开发完毕后 先上传
git add .
git commit -m 'update'
//然后切换主分支
git checkout master
//将线上分支合并到本地主分支
git merge origin/index-swiper
//然后上传
git push

 

 当下载其他历史版本时候，需要下载后创建git仓库

git init
//删除已存在仓库

git remote rm origin
//添加远程仓库
git remote add origin + // 远程仓库地址
//创建新分支

git branch [name]
//
git add.
git commit -m '7-3'
git checkout '新分支'
git push -u origin [name]

 

 

2.使用轮播图插件 vue-awesome-swiper

npm install vue-awesome-swiper --save



import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

 

插入模板文件到 template

<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>

 

设置图片宽高比

首先：在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度

，就是进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。

    overflow hidden
    width 100%
    height 0
    padding-bottom 32.5%

然后样式被锁定在组件中 但是我们组件中引用其他组件  就需要修改  就需要穿透

.wrapper >>> .swiper-pagination-bullet-active
background: #fff

 

样式