Vue实战项目开发--首页开发
2024-06-01 19:47:10
首页开发
注意：项目的图片资源都是去哪儿网站的在线图片(图片来源网站),只可以用来练习哦，小心侵权
1. 首页header区域开发
在home目录下新建一个components文件夹，然后把首页home拆分成不同的组件放在components文件夹下，最后通过在home.vue中引用对应的组件就可以了
主要编写的代码有Home.vue和Header.vue
home.vue:
<template>
<div><home-header></home-header>
</div>
</template>
<script>
import HomeHeader from './components/Header'
export default {name: 'Home',components:{HomeHeader},data () {return {}},computed: {},created () {},methods: {}
}
</script>
<style lang="less" scoped></style>
Header.vue
<template><div class="header"><div class="header-left">返回</div><div class="header-input">输入城市/经典/游玩主题</div><div class="header-right">城市</div></div>
</template>
<script>
export default {name: 'HomeHeader',data () {return {}},computed: {},created () {},methods: {}
}
</script>
<style lang="stylus" scoped>.headerdisplay: flexline-height: .86rembackground: #00bcd4color: #fff.header-leftwidth: .64rem float: left.header-inputflex: 1height: .64remline-height .64remmargin-left: .2rem margin-top: .12rembackground: #ffffffborder-radius: .1remcolor: #ccc.header-rightwidth: 1.24remfloat: righttext-align : center
</style>
Header.vue的样式使用stylus预处理框架来写的css样式，需要安装依赖
npm install stylus stylus-loader --saveiconfont的使用和代码的优化
在iconfont网站注册登录后，并创建自己的项目的图标库后，把你需要的图标加入到这个项目中
下载到本地后，在项目的assets/styles中新建一个iconfont文件夹，然后把刚才下载的文件解压，把里面这几个文件 iconfont.eot、iconfont.svg、iconfont.ttf和iconfont.woff放到新建的iconfont文件夹中，把iconfont.css放到assets/styles路径下，并修改iconfont.css的对前面四个文件的引用（因为前面四个文件的路径变化了）：
@font-face {font-family: "iconfont";src: url('./iconfont/iconfont.eot?t=1540351455180'); /* IE9*/src: url('./iconfont/iconfont.eot?t=1540351455180#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAS4AAsAAAAABywAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8mkksY21hcAAAAYAAAABgAAABnLTOHs9nbHlmAAAB4AAAANIAAADsyjr7HGhlYWQAAAK0AAAALwAAADYTC1G+aGhlYQAAAuQAAAAcAAAAJAfeA4VobXR4AAADAAAAAA4AAAAQEAAAAGxvY2EAAAMQAAAACgAAAAoAngBobWF4cAAAAxwAAAAfAAAAIAERADBuYW1lAAADPAAAAUUAAAJtPlT+fXBvc3QAAASEAAAAMgAAAEOSzck0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqTw3Z27438AQw9zM0AAUZgTJAQDkYwxCeJztkMENgEAIBAdRczGW4dOXMV4/vqz8rgwFzodFuGQIbAiPBQZAjdXoQS4E12muhK9M4fcctierDspStprv+zuFJC5STJ1/lpFfc/T93dRTa3jGZWt4rjU30AfLSRNieJxjYGRg+N/A9IO5mUGIgYGTkU1EnFHMyMxEnVHNxJzRTI+R6dg/F3EJxn0cYgIc/5w42Bn3cnPIM5f/s5F0kPznziEoysG4k0OMk/Ewtzw7AxAwA83bz1zK7MDAzSDOoMzAoKrHqG7HaC7HKM4HZgC5fIzscoysanaMYvKMYnyMauqMt9a+YGF5sXYdiFw38SALy8GJE0AkYy8Xs6gshyOY5AHKwdQ5wFRMmHjQiltGgJHLH0wyMIIcwcLA1MDABLSbUZEJSP9haAByGADaMDL4AAB4nGNgZGBgAOLOzkOi8fw2Xxm4WRhA4Po3tvsI+n8DCwNzM5DLwcAEEgUAO60LEQB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJteJxjYWBgYEHCAACwABEAAAAAAAAAKABoAHYAAHicY2BkYGBgYVBhYGYAASYg5gJCBob/YD4DAAx/AUIAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgS0tMS+jNJOtOL+0uDSfPSszMa8kv5SBAQBvVQhZAAA=') format('woff'),url('./iconfont/iconfont.ttf?t=1540351455180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('./iconfont/iconfont.svg?t=1540351455180#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
注意：这里有三种使用图标的样式，你可以看下载的文件里三种不同的引入方式，点击打开就可以查看了（特别重要）
不同的引用方式，复制不同的代码
然后在main.js中引入就可以使用了
import './assets/styles/iconfont.css'使用：
<i class="iconfont"></i>代码优化：在build的webpack.base.conf.js中这样增加这段代码
然后在main.js和Header.vue中就可以修改引入方式（注意：）
main.js：
import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'Header.vue：这里是styuls的css预处理设置的css
@import '~styles/varibles.styl'varibles.styl：
$bgColor = #00bcd4然后就可以在Header.vue中使用：
@import '~styles/varibles.styl'.headerdisplay flexline-height .86rembackground $bgColorcolor #fff首页轮播图
因为新加一个功能，然后就可以在GitHub上创建一个index-swiper分支，可以参考这个博客（GitHub--创建新的分支(转)）
使用轮播图需要安装一个插件（插件地址：vue-awesome-awiper）：
npm install vue-awesome-swiper@2.6.7 --save然后就是引入这个这个插件，分别可以全局引入和局部引入（具体的操作就看上面的插件地址中有说明）
全局引入：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'// require styles
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)局部引入：
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}
}Swiper.vue：
<template><div class="wrapper"><swiper :options="swiperOption" ><swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" :src="item.imgUrl" alt=""></swiper-slide><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: 'http://img1.qunarzz.com/piao/fusion/1810/e0/c99056cd01148902.jpg_750x200_8b93d0b5.jpg'},{id: '0002',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1808/7e/19b06067afac3402.jpg_750x200_f613313a.jpg'},{id: '0003',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg'}]}}
}
</script>
<style lang="stylus" scoped>.wrapper >>> .swiper-pagination-bullet-activebackground #ffffff.wrapperwidth 100%height 0overflow hiddenpadding-bottom 26.66%background #eeeeee// height 31.25vw (浏览器有差异，不建议).swiper-imgwidth 100%
</style>
Home.vue(改变):
<template>
<div><home-header></home-header><home-swiper></home-swiper>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default {name: 'Home',components:{HomeHeader,HomeSwiper},data () {return {}},computed: {},created () {},methods: {}
}
</script>
<style lang="less" scoped></style>
如果你是分支上进行这部分的代码的开发，则需要执行以下操作：
git add .
git commit -m '这里写这次提交的说明'
git push <- 上传index-swiper分支上->git checkout master <- 切换回主分支->
git merge index-swiper <- 将index-swiper分支合并到主分支上->图标区域页面布局
这里我们新建了一个分支index-icons，用于icons图标区域的功能实现，这里主要看代码就可以了
<template><div class="icons"><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div><div class="icon"><div class="icon-img"><img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt=""></div><p class="icon-desc">热门景点</p></div></div>
</template>
<script>
export default {name: 'HomeIcons'
}
</script>
<style lang="stylus" scoped>@import '~styles/varibles.styl';.iconswidth 100%overflow hiddenheight 0padding-bottom 50%.iconposition relativeoverflow hiddenfloat leftwidth 25%height 0padding-bottom 25%.icon-imgposition absolutetop 0left 0right 0bottom .44rembox-sizing border-boxpadding .1rem.icon-img-content display blockmargin 0 autoheight 100%.icon-descposition absoluteleft 0right 0bottom 0height .44remline-height .44remtext-align centercolor $darkTextColor
</style>
Home.vue:
<template><div><home-header></home-header><home-swiper></home-swiper><home-icons></home-icons> （新增的）</div>
</template><script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons' （import引入）
export default {name: 'Home',components:{HomeHeader,HomeSwiper,HomeIcons （注册）},data () {return {}},computed: {},created () {},methods: {}
}
</script>
<style lang="less" scoped></style>
图标区域逻辑实现
Icons.vue：
<template><div class="icons"><swiper :options="swiperOption"><swiper-slide v-for="(page,index) of pages" :key="index"><div class="icon"v-for="item of page":key="item.id"><div class="icon-img"><img class="icon-img-content" :src="item.imgUrl" alt=""></div><p class="icon-desc">{{item.desc}}</p></div> </swiper-slide></swiper></div>
</template>
<script>
export default {name: 'HomeIcons',data () {return {swiperOption:{autoplay: false},iconList: [{id:'0001',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',desc: '景点门票'},{id:'0002',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png',desc: '泡温泉'},{id:'0003',imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',desc: '成都必游'},{id:'0004',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',desc: '川剧变脸'},{id:'0005',imgUrl:'https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',desc: '打卡圣地'},{id:'0006',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png',desc: '赏秋色'},{id:'0007',imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',desc: '一日游'},{id:'0008',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png',desc: '成都熊猫基地'},{id:'0009',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',desc: '全部'}]}},computed: {pages () {const pages = []this.iconList.forEach((item,index) => {const page = Math.floor(index / 8)if(!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}}
}
</script>
<style lang="stylus" scoped>@import '~styles/varibles.styl';@import '~styles/mixins.styl';.icons >>> .swiper-containerheight 0padding-bottom 50%.iconposition relativeoverflow hiddenfloat leftwidth 25%height 0padding-bottom 25%.icon-imgposition absolutetop 0left 0right 0bottom .44rembox-sizing border-boxpadding .1rem.icon-img-content display blockmargin 0 autoheight 100%.icon-descposition absoluteleft 0right 0bottom 0height .44remline-height .44remtext-align centercolor $darkTextColorellipsis()
</style>
注意：这里css样式设置布局和计算属性来把原来的数组处理成了一个二维数组
mixins.styl（用stylus把常用的样式封装起来）：
ellipsis() overflow hiddenwhite-space nowraptext-overflow ellipsis*Icons.vue的css样式部分（注意这里是在Icons.vue里面的，使用stylus来写的css样式）：
<style lang="stylus" scoped>@import '~styles/varibles.styl';@import '~styles/mixins.styl';.icons >>> .swiper-containerheight 0padding-bottom 50%.iconposition relativeoverflow hiddenfloat leftwidth 25%height 0padding-bottom 25%.icon-imgposition absolutetop 0left 0right 0bottom .44rembox-sizing border-boxpadding .1rem.icon-img-content display blockmargin 0 autoheight 100%.icon-descposition absoluteleft 0right 0bottom 0height .44remline-height .44remtext-align centercolor $darkTextColorellipsis()
</style>*计算属性（注意这里是Icons.vue中的计算属性，把iconList处理成的一个二维数组，再使用两层v-for来循环出所有的图标，让超过8个的图标数组可以显示在第二页，滑动可以看到）：
computed: {pages () {const pages = []this.iconList.forEach((item,index) => {const page = Math.floor(index / 8)if(!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}}第一页：
第二页：
推荐组建开发
Recommend.vue
<template><div><div class="title">热销推荐</div><ul><li class="item border-bottom" v-for="item of recommendList" :key="item.key"><img class="item-img" :src="item.imgUrl" alt=""><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看详情</button></div></li></ul></div>
</template>
<script>
export default {name: 'HomeRecommend',data () {return {recommendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg',title: '成都海昌极地海洋公园',desc: '蠢萌企鹅陪你嗨翻这个秋'},{id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg',title: '都江堰',desc: '气势磅礴的“世界水利文化鼻祖'},{id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg',title: '青城道温泉',desc: '吐纳青城气息，享受自然温暖'},{id: '0004',imgUrl: 'http://img1.qunarzz.com/sight/p0/201307/23/b8db11dca4378903c8d65eac.jpg_200x200_56f59a84.jpg',title: '成都动物园',desc: '?好评如潮，小伙伴热推景点~'}]}}
}
</script>
<style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top .2remline-height .8rembackground #eee text-indent .2rem.itemoverflow hiddendisplay flexheight 1.9rem.item-imgwidth 1.7remheight 1.7rempadding .1rem.item-infoflex 1padding .1remmin-width 0.item-title line-height .54remfont-size .32remellipsis() .item-descline-height .4remcolor #cccellipsis() .item-buttonline-height .44remmargin-top .2rembackground #ff9300padding 0 .2remborder-radius .06remcolor #fff
</style>
Home.vue:
<template><div><home-header></home-header><home-swiper></home-swiper><home-icons></home-icons><home-recommend></home-recommend></div>
</template><script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
export default {name: 'Home',components:{HomeHeader,HomeSwiper,HomeIcons,HomeRecommend},data () {return {}},computed: {},created () {},methods: {}
}
</script><style lang="less" scoped></style>
效果图：
周末去哪儿-模块
直接把Recommend.vue的内容复制到Weekend.vue中，然后把name修改了，在把样式修改了，就可以了
Weekend.vue:
<template><div><div class="title">周末去哪儿</div><ul><li class="item border-bottom" v-for="item of recommendList" :key="item.key"> <div class="item-img-wrapper"><img class="item-img" :src="item.imgUrl" alt=""></div><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p></div></li></ul></div>
</template>
<script>
export default {name: 'HomeWeekend',data () {return {recommendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/source/1509/ff/4184c6c13edbb.jpg_r_640x214_60474b61.jpg',title: '成都周边秋色',desc: '细数成都周边秋天最美仙境'},{id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg',title: '成都必游TOP10',desc: '成都的标志，也是现代人对老成都的记忆'},{id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg',title: '慢游成都最美古镇',desc: '撷取一份悠闲，寻觅散落在时光里的幸福'},{id: '0004',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg',title: '郊野户外深呼吸',desc: '做个久违的深呼吸，来一场清肺之旅'}]}}
}
</script>
<style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top .2remline-height .8rembackground #eee text-indent .2rem.item-img-wrapperoverflow hiddenheight 0padding-bottom 33.9%.item-imgwidth 100%.item-infopadding .1rem.item-title line-height .54remfont-size .32remellipsis() .item-descline-height .4remcolor #cccellipsis()
</style>
Home.vue
<template><div><home-header></home-header><home-swiper></home-swiper><home-icons></home-icons><home-recommend></home-recommend><home-weekend></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'
export default {name: 'Home',components:{HomeHeader,HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend},data () {return {}},computed: {},created () {},methods: {}
}
</script><style lang="less" scoped></style>
显示效果：
Ajax获取首页数据
这里使用vue推荐的axios来实现Ajax的请求
因为不是每一个人都有服务器来实现请求，所以这里我们使用模拟的数据来实现请求
- 首先安装axios来实现Ajax请求数据
npm install axios --save在Home.vue中引入：
import axios from 'axios'mounted () {this.getHomeinfo()},methods: {getHomeinfo () {axios.get('/api/index.json').then(this.getHomeinfoSucc)},getHomeinfoSucc (res) {console.log(res)}}上面就是在Home.vue中的axios的使用
- 在static文件夹下新建一个mock文件夹，新建一个index.json文件，用来模拟数据
index.json:
{"ret": true,"data": {"city": "成都","swiperList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/piao/fusion/1810/e0/c99056cd01148902.jpg_750x200_8b93d0b5.jpg"},{"id": "0002","imgUrl": "http://img1.qunarzz.com/piao/fusion/1808/7e/19b06067afac3402.jpg_750x200_f613313a.jpg"},{"id": "0003","imgUrl": "http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"}],"iconList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png","desc": "景点门票"},{"id": "0002","imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png","desc": "泡温泉"},{"id": "0003","imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png","desc": "成都必游"},{"id": "0004","imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png","desc": "川剧变脸"},{"id": "0005","imgUrl": "https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png","desc": "打卡圣地"},{"id": "0006","imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png","desc": "赏秋色"},{"id": "0007","imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png","desc": "一日游"},{"id": "0008","imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png","desc": "成都熊猫基地"},{"id": "0009","imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png","desc": "全部"}],"recommendList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg","title": "成都海昌极地海洋公园","desc": "蠢萌企鹅陪你嗨翻这个秋"},{"id": "0002","imgUrl": "http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg","title": "都江堰","desc": "气势磅礴的“世界水利文化鼻祖"},{"id": "0003","imgUrl": "http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg","title": "青城道温泉","desc": "吐纳青城气息，享受自然温暖"},{"id": "0004","imgUrl": "http://img1.qunarzz.com/sight/p0/201307/23/b8db11dca4378903c8d65eac.jpg_200x200_56f59a84.jpg","title": "成都动物园","desc": "?好评如潮，小伙伴热推景点~"}],"weekendList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/sight/source/1509/ff/4184c6c13edbb.jpg_r_640x214_60474b61.jpg","title": "成都周边秋色","desc": "细数成都周边秋天最美仙境"},{"id": "0002","imgUrl": "http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg","title": "成都必游TOP10","desc": "成都的标志，也是现代人对老成都的记忆"},{"id": "0003","imgUrl": "http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg","title": "慢游成都最美古镇","desc": "撷取一份悠闲，寻觅散落在时光里的幸福"},{"id": "0004","imgUrl": "http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg","title": "郊野户外深呼吸","desc": "做个久违的深呼吸，来一场清肺之旅"}]}
}
- 修改webpack配置（修改config/index.js）：
proxyTable: {},在dev下的proxyTable中新增下面的内容
proxyTable: {'/api': {target: 'http://localhost:8080',pathRewrite: {'^/api': '/static/mock'}}
},作用是使我们在开发环境访问API的index.json时自动去找模拟的数据（/static/mock/index.json），而在正式环境时就访问正式的接口，减少后期的更改请求接口的问题
首页父子组件数据传递
在Home.vue中获取全部的数据，然后在传递给子组件
- 首先，在Home.vue的data中定义需要传递的数据名称
- 然后把取到的值赋值给data中的定义好的属性
- 最后传递给子组件，子组件接受
传递给子组件（通过属性的方式）：
子组件接受：
注意：这里list：Array和city：String是表示子组件接受父组件传递来的数据是什么类型的，如果父组件传递的不是这个类型的就会报错，
还有就是在swiper.vue中会出现轮播图显示的是最后一张图片，因为父组件传递了一个空数组造成，这里这样处理
然后这里实现的是当数组为空时，swiper不会进行循环，首页部分就完成了
最最最后就是把代码提交到GitHub上（我的这个练手项目在github上地址：项目地址，有需要的小伙伴可以拉取下来，运行下）
Vue实战项目开发--首页开发相关推荐
- 头条新闻（Vue实战项目）-首页1
首先简单介绍一下项目. 项目简单的分为了首页和个人中心两大板块,在首页中我们可以快速浏览文章信息,也可以点击搜索,搜索我们感兴趣的文章内容:可以滑动标签页选择自己感兴趣的频道进行浏览.在个人中心页中, ...
- vue实战项目：电商管理系统实现步骤笔记(一)
vue实战项目 视频地址以及项目文件 一.项目概述 1.1电商项目基本业务概述 1.2电商后台管理系统的功能 1.3电商后台管理系统的开发模式(前后端分离) 1.4电商后台管理系统的技术选型 1.4. ...
- android项目实战博学谷源码_Vue框架：史上最详细的Vue实战项目之喵喵电影（视频+源码）...
Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...
- Node+Vue实战项目
一.Node+Vue实战项目 1.1 创建Node项目.Vue项目 mkdir classweb cd classweb/express servervue init webpack vueclien ...
- 推荐一些vue实战项目
好的,下面是一些推荐的 Vue 实战项目: 待办事项应用:这是一个简单的 Vue 项目,可以帮助你熟悉 Vue 的基础知识,并学习如何使用 Vue 实现增删改查功能. 电商网站:这是一个更复杂的 Vu ...
- 高仿网易云音乐(vue实战项目)
高仿网易云音乐(Vue实战项目)
- 真 · 前端Vue实战：头条新闻开发项目（下）
现在在企业里面,Vue成为前端框架中最火的一个.由于其简单易学,越来越多的网站前端开始采用Vue开发,毋庸置疑,掌握Vue技术可以为你的职场增加更多的机会. 今晚,黑马程序员金牌讲师伍老师,将为大家 ...
- Vue实战中的模块化开发
最近公司接了一个Pc端的后台项目,所以我也从APP转向了Web平台的开发,在经受了一年多的APP开发的折磨之后终于迎来了春天,再也不用自己梳理业务.绘制原型.编写各种文档.处理IM.做后台保活这些让人 ...
- 串口 单片机 文件_STM32物联网实战项目 HAL裸机开发09 串口打印
就喜欢你关注我- HAL裸机开发09 - 串口打印 综合信息1.获取开发工具 微信公众号后台发送消息 - 工具2.获取开发板 淘宝搜索店铺 - 硬件家园3.快速了解平台 ...
- 初级项目vue实战项目 收银系统
Vue实战视频-快餐店收银系统 (共11集) 2017-05-22 分类:Vue.js视频教程 / 视频教程 阅读(126832) 评论(136) 课程前言 这是我网站恢复后写的第一篇文章,在关站这 ...
最新文章
- HDU 1155 Bungee Jumping
- 多线程-synchronized锁
- shiroConfig配置中要注意的事项
- 混沌工程将成标配？落地腾讯游戏后带来了哪些惊喜？丨Gdevops峰会
- java中servletcontext_java中获取ServletContext常见方法
- missforest_missforest最佳丢失数据插补算法
- 如何将计算机加入到域环境中,如何在讲计算机加入一个WinXP的域环境
- java中import机制(指定import和import *的区别)
- VBS 与 VBA 的区别
- java中到底有没有指针？
- 【Matlab学习笔记】【数据类型】介绍
- Linux中sql*loader-350,SqlLoader
- android自动计步_自动计步器app下载
- linux 远程 mox,MOX 文件扩展名： 它是什么以及如何打开它？
- devExpress chart c# 折线图绘制
- 【保研面经】人大信息学院，北航计算机学院，中科大大数据学院，南大计算机系
- os.system() 和os.popen()的区别
- 在线订舱物流详情 广州力其
- springboot集成阿里MNS消息队列发布订阅消息功能
- GBT22239-2019信息安全技术网络安全等级保护基本要求第三级安全要求管理部分表格版
热门文章
- GSM、UMTS、LTE
- 网络直播延迟该如何解决这个问题
- OneNote无法粘贴图片
- opencv将透明PNG图片填充为白色背景
- 使用FFMpeg从mp4中提取mp3
- Android 自定义viewGroup实现淘宝二楼及处理多指触控事件
- python自动翻译pdf_python pdf一键翻译脚本
- 导航动态避让算法RVO的优化ORCA(Optimal Reciprocal Collision Avoidance)
- 专业词汇扫盲：MRR(Mean reciprocal rank) ,long-tail,link prediction
- html5设置谷歌浏览器兼容性,谷歌浏览器如何设置兼容性视图_谷歌浏览器设置兼容性视图的方法－系统城...