首页制作完的整体效果：
如果你想看首页整体开发效果，直接运行master分支即可：
https://github.com/fx35792/vue-travel
如果想看每部分的开发效果：
- 首页header和swiper我放到一个分支上了都在swiper分支：
https://github.com/fx35792/vue-travel/tree/swiper - 首页iconList开发
https://github.com/fx35792/vue-travel/tree/index-icons - 首页”热门推荐“和”周末去哪“开发
https://github.com/fx35792/vue-travel/tree/index-recommond
9-1 Vue项目开发首页之header
在开发这块的时候，主要是一个布局的设置，还有就是icon图标，这个icon图标用的是阿里iconfont:https://www.iconfont.cn/
1.创建一个iconfont账号
2.登录后-->图标管理-->我的图标-->新建项目
3.去查找UI所需要的图标icon，添加购物车-->添加项目-->选择自己新建的项目
4.图标全部查找完以后可以把这个项目下载到本地
第一种方法：如果是下载到本地，放入到项目中的操作
在main.js引入
import 'styles/iconfont.css'
//页面上使用的话
<span class="iconfont search-icon"></span>
第二种方法：不下载本地，用阿里iconfont的cdn
在index.html中添加
<link rel="stylesheet" href="//at.alicdn.com/t/font_892705_hf5c19omqen.css">‘’
//页面上使用的话（和方法一是一样的）
<span class="iconfont search-icon"></span>
如果你是线上项目，为了保险起见，推荐使用方法一
但是如果你平时自己做项目练习，你使用方法二就行
9-2 Vue项目开发首页之Swiper轮播图
1.安装https://github.com/surmon-china/vue-awesome-swiper
npm install vue-awesome-swiper --save
2.如何使用呢？
因为项目中很多地方可能需要用到swiper，所以我们打算把他放到main.js中
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3.具体代码调用
//template
<swiper :options="swiperOption" v-if="swiperShow">
<swiper-slide v-for="item of list" :key="item.id">
<img :src="item.imgUrl" alt class="swiper-img">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
//js
<script>
export default {
name: 'HomeIcons',
data () {
return {
swiperOption: {
pagination: 'swiper-pagination',//是否显示轮播图下面的小圆点
autoPlay: false//是否循环自动播放
}
}
},
computed: {
swiperShow: function () {
return this.list.length//当有数据的时候，再去渲染swiper，不然显示的第一条数据是最后一条
}
}
}
</script>
9-3 Vue项目开发首页之”热门推荐“和”周末去哪“
这一小节主要是UI上布局制作，以及data里面模拟一些数据，渲染到页面上。具体细节看
https://github.com/fx35792/vue-travel/tree/index-recommond
看代码基本上都可以看明白的，在这咱们就不详细的赘述了
9-4 Vue项目开发首页之ajax数据请求
我们通过ajax来实现接口请求的数据，但是呢？在开发过程中，很多时候都是我们前端自己mock数据，通过代理，最后映射到页面上数据的，随后等服务器接口开发好了，我们在把mock数据地址替换为服务器地址即可。
1.那么如何设置代理呢？
其实在vue-cli的脚手架中，已经办咱们配置好了设置，只需要你自己配置一下即可：
//在config文件下面的index.js文件中：
proxyTable: {
'/api': {
target:'http://localhost:8080',//因为数据在我项目本地，所以我配置的localhost,如果是服务器你配置后端伙伴发给你的服务器地址即可
pathRewrite: {
'^/api':'/static/mock' //当你接口请求中，以`/api`开头的时候，会帮我们代理到我们本地的/static/mock目录下面数据文件
}
}
},
2.安装axios
npm install axios -S
3.在页面上使用
import axios from 'axios'
mounted () {//一般的异步请求，我们都会放在mounted的生命周期中
this.getHomeInfo()//这个我们定义了一个方法，而不是直接写，是为了重复使用这个方法
},
methods: {
getHomeInfo () {
//通过axios请求接口
//当我们遇到`/api`,代理直接会找到/static/mock/index.js文件
axios.get('/api/index.json').then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
const result = res.data
if (result.ret && result.data) {
const data = result.data
console.log(data)
this.city = data.city
this.swiperList = data.swiperList
this.iconList = data.iconList
this.recommendList = data.recommendList
this.weekendList = data.weekendList
}
}
}
9-5 Vue项目开发首页之父子组件之间的传值
在制作的首页过程中，我们将首页拆分成了五部分，分别是：
header、banner轮播、icon轮播、热门推荐、周末去哪
那么，为了减少http接口请求，后端小伙伴会把五部门的内容都放到一个接口中去，在咱们本地模拟数据中我是放到了static/mock/index.json中的
所以在Home.vue中
//Home.vue
<template>
<div>
<home-header :city="city"></home-header>
<home-swiper :list="swiperList"></home-swiper> <!-- 第四步 -->
<home-icons :list="iconList"></home-icons>
<home-recommend :list="recommendList"></home-recommend>
<home-weekend :list="weekendList"></home-weekend>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
},
data () {
return {
city: '',
swiperList: [],.//第二步
iconList: [],
recommendList: [],
weekendList: []
}
},
methods: {
getHomeInfo () {
axios.get('/api/index.json').then(this.getHomeInfoSucc)//第一步
},
getHomeInfoSucc (res) {
const result = res.data
if (result.ret && result.data) {
const data = result.data
console.log(data)
this.city = data.city
this.swiperList = data.swiperList//第三步
this.iconList = data.iconList
this.recommendList = data.recommendList
this.weekendList = data.weekendList
}
}
},
mounted () {
this.getHomeInfo()
}
}
</script>
<style>
</style>
//Swiper.vue
<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if="swiperShow">
<swiper-slide v-for="item of list" :key="item.id"><!--第六步-->
<img :src="item.imgUrl" alt class="swiper-img">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
props: {
list: Array //第五步
},
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
loop: true
}
}
},
computed: {
swiperShow: function () {
return this.list.length
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active {
background: #fff !important;
}
.wrapper {
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 31.25%;
background: #eee;
.swiper-img {
width: 100%;
}
}
</style>
在这里咱们主要讲讲，首页父子组件的传值，咱们拿一个banner轮播图例子来说，其他的四部分咱们就不在这里赘述了。你去github仓库看源码就很容易明白。
第一步：接口请求拿到数据(axios.get('/api/index.json').then(this.getHomeInfoSucc)//第一步)
第二步：在data中我们初始化这五部分数据(swiperList: [],.//第二步)
第三步：把接口拿到的数据依次放入到data初始化的值中( this.swiperList = data.swiperList//第三步)
第四步：在Home.vue父组件中定义一个属性，来给Swiper.vue子组件传值（:list="swiperList"）
第五步：在Swiper.vue子组件中接受父组件传来的值（props: {
list: Array //第五步
}）
第六步：子组件渲染出来父组件传递过来的数据（<swiper-slide v-for="item of list" :key="item.id">）
更多
上一篇：第8章 Vue项目预热
下一篇：第10章 Vue项目开发之城市
全篇文章：Vue学习总结
所有章节目录：Vue学习目录
