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

    
    I'm Slide 1
    I'm Slide 2
    I'm Slide 3
    I'm Slide 4
    I'm Slide 5
    I'm Slide 6
    I'm Slide 7
    
    

    

    

    

  

 

设置图片宽高比

首先：在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

 

样式