web前端的学习日志（6）

Vue.js的学习过程

第六天的学习

一、iconfont 矢量图标库的导入
1、将下载好的文件夹中的.eot, .svg, .ttf, .woff 文件添加到/src/styles/iconfont文件加内，将inconfont.css文件添加到/styles文件夹内。
2、修改iconfont.css里的路径
3、在main.js里添加iconfont.css的路径
二、样式表中引用.styl文件
由于像header的背景颜色是绿色，以后可能经常会用到这个背景颜色，我们可以把bgColor写到.styl文件中去，再用的时候就可以直接引用这个颜色。
在/assets/styles/文件夹下创建varibles.styl文件，写入

$bgColor = #00bcd4

在要引用.styl文件中元素的样式表中首先导入

@import '~@/assets/styles/varibles.styl'

之后就可以引用了

background: $bgColor

三、将目前完成的项目更新到github或gitee上

git add .
git commit -m 'add header'
git push

四、在github或gitee上创建新分支
首先在github或gitee上创建分支，比如本次分支叫做index-swiper
然后在本地进入分支

git pull
git checkout index-swiper  //此步就已进入该分支了
git status  //查看是否在该分支上

五、轮播图
安装github上的vue-awesome-swiper插件

npm install vue-awesome-swiper@2.6.7 --save

main.js里导入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

然后写swiper组件

<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
	    <!-- slides -->
	    <swiper-slide v-for="item of swiperList" :key="item.id">
	    	<img class="swiper-img" :src="item.imgUrl" />
	    </swiper-slide>
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	</div>
</template>

<script>
	export default{
		name: 'HomeSwiper',
		data () {
			return{
				swiperOption: {
					pagination: '.swiper-pagination',
					loop: true
				},
				swiperList: [{
					id: '0001',
					imgUrl: '//img1.qunarzz.com/vc/99/c1/c4/3426c6a3b54ef464e40e440fe3.jpg'
				},{
					id: '0002',
					imgUrl: '//img1.qunarzz.com/vc/ce/4b/45/7f78e2003fb5fb65c57eb1a800.jpg'
				}]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background: #ff0000
	.wrapper
		overflow: hidden
		width: 100%
		height: 0
		padding-bottom: 31.25%
		.swiper-img
			width: 100%
</style>

六、将该分支项目合并到主项目

git add .
git commit -m 'change'
git push
git checkout master
git merge origin/index-swiper
git push