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
样式
vue项目 首页开发 part2的更多相关文章
- vue项目 首页开发 part3
da当拖动图标时候,只有上部分可以,下部分无响应 swiper 为根页面引用,其中的css为独立,点击swiper标签可以看见其包裹区域只有部分 那么需要修改 就需要穿透样式 外部 >> ...
- vue项目的开发
vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...
- 如何加快Vue项目的开发速度
如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...
- python-django框架-电商项目-首页开发_20191122
python-django框架-电商项目-首页开发 业务背景: 用户浏览网站一定是先到首页, 没有登陆的话首页内容完全一样,而且是不经常变化的, 一段时间内,有100用户访问,就要有几个用户就要查询多 ...
- 前端Vue项目——首页/课程页面开发及Axios请求
一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...
- 加快Vue项目的开发速度
巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个 ...
- vue-router中,require代替import解决vue项目首页加载时间过久的问题
vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...
- Vue项目在开发环境跨域和生成环境部署跨域问题解决
一.在dev环境下的跨域问题解决1.项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host) axios.defaul ...
- vue 项目的开发流程
1.$ node -v (检测node版本,node版本需要在 V4 以上) 2.全局安装vue $ npm install -g vue 3.安装脚手架 $ npm install -g vue-c ...
随机推荐
- Day 25:XML解析
XML解析 xml文件除了给开发者看,更多的情况使用程序读取xml文件的内容.这叫做xml解析 XML解析方式(原理不同) DOM解析 SAX解析 XML解析工具 DOM解析原理: JAXP (ora ...
- 阿里云香港服务器IIS发布网站不成功解决方法
刚刚弄好了一个阿里云上服务器,费老劲儿了.我买了一个香港的服务器,最低配置,专有网络,买着玩的,一个.win的域名,省的国内备案了. 遇到的问题是怎么也访问不了我IIS上发布的网站,我把我解决方法说下 ...
- 【转载】Asp .Net Web Api路由路径问题
原文章地址:https://www.cnblogs.com/devtester/p/8897302.html MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一 ...
- 133-PHP子类无法重写父类private同名函数
<?php class father{ //定义father类 //定义protected成员方法 protected function cook(){ return 'protected co ...
- Swift 结构体struct
//结构体是一个值类型 struct location{ //属性 var x:Double var y:Double //方法 func test() { print("结构体中的test ...
- Elasticsearch 教程
章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...
- git仓库管理
删除本地仓库当前关联的无效远程地址,再为本地仓库添加新的远程仓库地址 git remote -v //查看git对应的远程仓库地址 git remote rm origin //删除关联对应的远程仓库 ...
- typeof()与Object.prototype.toString.call()
用typeof方法只能初步判断number string undefined boolean object function symbol这几种初步类型 使用Object.prototype.toSt ...
- MarkDown简易教程+语法
一.标题 一个#是一级,两个#是二级,最大六级 二.字体 1.加粗 要加粗的文字左右分别用两个*号包起来 2.斜体 要倾斜的文字左右分别用一个*号包起来 3.斜体加粗 要倾斜和加粗的文字左右分别用三个 ...
- UVA - 1631 Locker(密码锁)(dp---记忆化搜索)
题意:有一个n(n<=1000)位密码锁,每位都是0~9,可以循环旋转.每次可以让1~3个相邻数字同时往上或者往下转一格.输入初始状态和终止状态(长度不超过1000),问最少要转几次. 分析: ...