首頁制作完的整體效果：
如果你想看首頁整體開發效果，直接運行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" >‘’
//頁面上使用的話（和方法一是一樣的）
<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學習目錄
