知识点回顾

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

样式

vue项目 首页开发 part2的更多相关文章

  1. vue项目 首页开发 part3

    da当拖动图标时候,只有上部分可以,下部分无响应 swiper 为根页面引用,其中的css为独立,点击swiper标签可以看见其包裹区域只有部分 那么需要修改 就需要穿透样式 外部  >> ...

  2. vue项目的开发

    vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...

  3. 如何加快Vue项目的开发速度

    如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...

  4. python-django框架-电商项目-首页开发_20191122

    python-django框架-电商项目-首页开发 业务背景: 用户浏览网站一定是先到首页, 没有登陆的话首页内容完全一样,而且是不经常变化的, 一段时间内,有100用户访问,就要有几个用户就要查询多 ...

  5. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  6. 加快Vue项目的开发速度

    巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个 ...

  7. vue-router中,require代替import解决vue项目首页加载时间过久的问题

    vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...

  8. Vue项目在开发环境跨域和生成环境部署跨域问题解决

    一.在dev环境下的跨域问题解决1.项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host) axios.defaul ...

  9. vue 项目的开发流程

    1.$ node -v (检测node版本,node版本需要在 V4 以上) 2.全局安装vue $ npm install -g vue 3.安装脚手架 $ npm install -g vue-c ...

随机推荐

  1. maven package和install

    mvn clean package依次执行了clean.resources.compile.testResources.testCompile.test.jar(打包)等7个阶段.mvn clean ...

  2. 提升Windows系统舒适度软件

    1.Geek Uninstaller 卸载软件 2.PotPlayer 无广告播放器

  3. 会话控制——Cookie和Session

    Cookie简介 l  HTTP是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出.这样的设计严重阻碍的Web程序的设计.如:在我们进行网购时,买了一条 ...

  4. [洛谷Luogu]P1141 01迷宫[联通块 并查集]

    题目链接 大致题意 相邻格子不同为连通,计算每个点所在的连通块大小. 想法 我采用了并查集的做法. 开一个辅助数组记录连通块大小,每次合并的时候更新父亲节点的大小即可. 一个点先与它上面的点判定,若判 ...

  5. Typecho博客添加版权说明

    版权声明是指作品权利人对自己创作作品的权利的一种口头或书面声明,一般版权声明应该包括权利归属.作品使用准许方式.责任追究等方面的内容.诸如平时看文章时最后会有一个严禁转载的说明,其实这就是版权声明. ...

  6. 让vscode使用Pipenv工作环境

    1.查看Pipenv的位置 # 先激活Pipenv环境 pipenv shell # 获取当前虚拟环境的位置 pipenv --venv 2.打开setting.json配置文件 Ctrl+Shift ...

  7. JAVA-数据类型-复习

    JAVA-数据类型-复习 Java中,一共有8种数据类型,4种整型,2种浮点型,1种用于表示Unicode编码的字符单元的字符类型char,1种布尔类型. 整型 类型 存储需求(字节)一个字节包含8个 ...

  8. JAVA的控制结构

    一.控制结构 1.控制结构概述 控制结构是控制程序如何运行的特殊的语句结构.控制结构可以分为:顺序控制结构,分支控制结构和循环控制结构. 2.顺序控制结构 除了分支控制结构和循环控制结构之外的语句都是 ...

  9. 吴裕雄--天生自然C++语言学习笔记:C++ 命名空间

    假设这样一种情况,当一个班上有两个名叫 Zara 的学生时,为了明确区分它们,在使用名字之外,不得不使用一些额外的信息,比如他们的家庭住址,或者他们父母的名字等等. 同样的情况也出现在 C++ 应用程 ...

  10. mac允许“任何来源”下载的应用

    刚买的mac电脑,我们不止在App Store上下载,还会通过浏览器下载 有的时候需要下载一些破解的软件,这个时候安装会提示文件被破坏,很是头疼 不用着急,这是因为mac会判断app如果被破坏,就不允 ...