vue项目-2-旅游网站首页开发

git使用传送门 本文代码传送门

1.安装less

npm install less less-loader --save-dev

2.在src->pages->home->新建components文件夹,在components创建header.vue

3.iconfont的使用

1. 点击"图标库"->官方图标库->选择"大麦图标"->选择需要的图标添加到购物车->添加到项目->下载
2. 把字体文件放在src->assets->style->iconfont下面
3. 把iconfont.css放在src->assets->style下面
4. 把iconfont.css改下路径,在路径前加./iconfont(url,1245个改)
5. 在main.js中引入 import './assets/styles/iconfont.css'
6. 使用 <span class="iconfont">&#xe624;</span>

4.优化,背景颜色有可能后期会变.所以建一个变量在styles->varibles.less,定义变量

在header.vue的style里面引用就可以了

@import url("../../../assets/styles/varibles.less");也可以这样引用@import url("~@assets/styles/varibles.less");

5.改路径别名

1. 在build->webpack.base.conf.js里面
2. aluas:里面配置'styles': resolve('src/assets/styles'),
3. 在header里引用就可以@import "~styles/varibles.less";
4. 配置了一定要重启服务器

6.轮播图的制作

 git创建及切换分支,看传送门

1. git命令创建分支,在码云里面点击一个分支->创建分支index-swiper
2. git pull命令的作用是：取回远程主机某个分支的更新，再与本地的指定分支合并(把线上的分支拉倒本地上来)
3. git checkout index-swiper 切换到分支index-swiper
4. 完成过后正常提交git add .,git commit -m "轮播图完成" git push
5. git checkout master切换到主线路上

6. git merge origin/index-swiper 把分支内容提交到master

7. git push

轮播图插件(在局部样式中改其他样式,需要样式穿透)

1. 在github上搜索vue-awesome-swiper
2. 安装npm install [email protected] --save,因为新版本有点问题,这里我选择了2.6.7版本
3. 在全局下使用,main.js引用一下内容
4. data-swiper-autoplay="2000",在每张图停留时间,官网说明

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

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

 这是新建立的components->Swiper.vue文件

<template>
<div class="wrapper">
<swiper :options="swiperOption" >
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id" data-swiper-autoplay="2000">
<img :src="item.imgUrl" class="swiper-img"/>
</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>
</div>

</template>

<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',  //原点
loop: true   //循环播放
},
swiperList: [
{
id: '0001',
imgUrl: "../../../../static/images/swiper/sw1.jpg"
}, {
id: '0002',
imgUrl: "../../../../static/images/swiper/sw2.jpg"
}
]
}
}
}
</script>

<style lang="less" scoped>
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff !important;
}
.wrapper{
/*解决网速慢抖动的问题,下面的padding-bottom的比例是图片的宽高百分比*/
/*width:100%; height:26.67vw,这样也是一样的*/
overflow: hidden;
width:100%;
height: 0px;
padding-bottom: 26.67%;
background: #ccc;
}
.swiper-img{
width: 100%;
}

</style>