Vue2.5从零开发猫眼④—

Vue2.5从零开发猫眼系列以更新完毕

Vue2.5从零开发猫眼①——前言

Vue2.5从零开发猫眼②——项目开始前准备

Vue2.5从零开发猫眼③——启动页开发

Vue2.5从零开发猫眼④——Home页开发

Vue2.5从零开发猫眼⑤——影院页开发

Vue2.5从零开发猫眼⑥——个人中心组件开发

Vue2.5从零开发猫眼⑦——City组件开发

Vue2.5从零开发猫眼⑧——引入store、LocalStorage和优化上线

CommonHeader组件开发

在src目录创建pages\home\Home.vue

<template><div><common-header :title="title" :back="true" @goBack="goBack"></common-header></div>
</template><script>
import CommonHeader from '../../components/header/Header'
export default {name: 'Home',components: {CommonHeader},data () {return {title: '首页'}},methods: {goBack() {this.$router.back()}}
}
</script>
<style>
</style>

修改router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import Start from '@/pages/start/Start'Vue.use(Router)
export default new Router({routes: [{path: '/',name: 'start',component: Start},{path: '/home',name: 'home',component: Home}]
})

这里我们引入了CommonHeader组件，所以我们在src\components\header下创建Header.vue, 因为CommonHeader属于其他页面公共的组件，所以我们把公共组件都放到components目录下，方便引用

<template><div class="header"><div class="header-left" v-if="back" @click="goBack"><span class="iconfont icon-zuojiantou"></span></div><h1 class="title" v-text="title"></h1></div>
</template><script>
export default {name: 'Header',props: {title: {type: String,default: ''},back: {type: Boolean,default: false}},methods: {goBack() {this.$emit('goBack')}}
}
</script><style lang="stylus" scoped>@import '~stylus/variable.styl'.headerheight: 50pxcolor: #fffbackground: $bgColorborder-bottom: 1px solid #e54847position: relative.header-leftposition: absoluteleft: 10pxtop: 16px.icon-zuojiantoufont-size:20px.titlefont-size: 18pxfont-weight: 400text-align: centerline-height: 50pxcolor: #fff
</style>

CommonHeader 只做页面显示，不处理逻辑，如果其他组件需要引用它时候需要传参数，和监听对应的goBack函数。

NavMenu组件开发

因为NavMenu只是home页的组件，所以在home组件页下创建components\nav-menu\NavMenu组件

<template><div class="nav-menu scale-1px"><router-link to='/city'><div class="left"><span>北京</span><span class="iconfont icon-xiala"></span></div></router-link><div class="center"><span class="menu" :class="[menuActive == menu.id ? 'active' : '']" @click="changeMenu(menu.id)" v-for="menu of menuList" :key="menu.id">{{ menu.title }}</span></div><router-link to='/search'><div class="right"><span class="iconfont icon-sousuo"></span>  </div></router-link></div>
</template><script>
export default {name: 'NavMenu',props: {menuActive: {type: Number,default: 0}},data() {return {menuList: [{id: 0,title: '正在热映'},{id: 1,title: '即将上映'}]}},methods: {changeMenu(menuId) {this.$emit('changeMenu', menuId);}}
}
</script><style lang="stylus" scoped>@import '~stylus/variable.styl'.nav-menuheight: 44pxdisplay: flex.leftwidth: 80pxfloat: leftline-height:44pxcolor: #666text-align: center.icon-xialafont-size:14px.centerflex: 1text-align: centerline-height:44pxpadding: 0 20pxposition: relative.menudisplay:inline-blockcolor: #666font-weight: 700width: 50%;float: left;box-sizing: border-box;&.activecolor: $bgColor&:aftercontent: ""display: blockposition: absolutebottom: -1pxwidth: calc(50% - 20px);height: 2pxbackground-color: $bgColor.rightfloat: rightwidth: 50pxcolor: $bgColorline-height:44pxtext-align: centerfont-size:16pxfont-weight: bold
</style>

这个组件需要注意的是使用了选中的menu下划线使用了calc的函数，具体calc使用可以去网上搜索

然后再Home.vue里引用该组件

1. import NavMenu from './components/nav-menu/NavMenu'
2. components: {CommonHeader,NavMenu},
3. <nav-menu :menu-active="menuActive" @changeMenu="changeMenu"></nav-menu>

内容组件开发

先获取数据接口再static\创建mock\home.json

{"code": 1,
"movieList": [{"id": 249342,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/c106904da68edd848afd4a320976d051346321.jpg","version": "v3d imax","nm": "海王","preShow": false,"sc": 9.6,"globalReleased": true,"wish": 250996,"star": "杰森·莫玛,艾梅柏·希尔德,妮可·基德曼","rt": "2018-12-07","showInfo": "今天101家影院放映2598场","showst": 3,"wishst": 0},{"id": 1220969,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/3020fcde26f323551243819629c251a8376809.jpg","version": "","nm": "惊涛飓浪","preShow": false,"sc": 0,"globalReleased": true,"wish": 36139,"star": "谢琳·伍德蕾,山姆·克拉弗林,伊丽莎白·霍桑","rt": "2018-12-07","showInfo": "今天101家影院放映777场","showst": 3,"wishst": 0},{"id": 1208282,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/3e7696319c840d4890e947b926259d532809641.jpg","version": "","nm": "无名之辈","preShow": false,"sc": 9.1,"globalReleased": true,"wish": 15666,"star": "陈建斌,任素汐,潘斌龙","rt": "2018-11-16","showInfo": "今天96家影院放映554场","showst": 3,"wishst": 0},{"id": 78480,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/feb4cd6eb054232b4851a97bbc2a66d51198036.jpg","version": "","nm": "狗十三","preShow": false,"sc": 8.4,"globalReleased": true,"wish": 18506,"star": "张雪迎,果靖霖,智一桐","rt": "2018-12-07","showInfo": "今天94家影院放映318场","showst": 3,"wishst": 0},{"id": 123,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/c304c687e287c7c2f9e22cf78257872d277201.jpg","version": "","nm": "龙猫","preShow": false,"sc": 0,"globalReleased": false,"wish": 105627,"star": "秦岚,糸井重里,岛本须美","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0},{"id": 1215919,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/2205b5298f91edc2b072f1dbc8d4e46e5518392.jpg","version": "","nm": "印度合伙人","preShow": false,"sc": 0,"globalReleased": false,"wish": 18745,"star": "阿克谢·库玛尔,索娜姆·卡普尔,雷.雷富","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0},{"id": 42964,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/363e3a7e614d29b2847ff4e62afcd3f42168651.jpg","version": "v3d imax","nm": "毒液：致命守护者","preShow": false,"sc": 9.3,"globalReleased": true,"wish": 393571,"star": "汤姆·哈迪,米歇尔·威廉姆斯,里兹·阿迈德","rt": "2018-11-09","showInfo": "今天52家影院放映151场","showst": 3,"wishst": 0},{"id": 341213,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/600beaeaa9929649f38181d41f2c8578328129.jpg","version": "v3d imax","nm": "无敌破坏王2：大闹互联网","preShow": false,"sc": 8.9,"globalReleased": true,"wish": 102436,"star": "约翰·C·赖利,萨拉·西尔弗曼,克里斯汀·贝尔","rt": "2018-11-23","showInfo": "今天50家影院放映111场","showst": 3,"wishst": 0},{"id": 344649,"haspromotionTag": false,"img": "https://p1.meituan.net/128.180/movie/19efcfbf1a98c02cb5efd69a2edf766e2421917.jpg","version": "v2d imax","nm": "天气预爆","preShow": false,"sc": 0,"globalReleased": false,"wish": 23097,"star": "肖央,杜鹃,常远","rt": "2018-12-21","showInfo": "2018-12-21上映","showst": 4,"wishst": 0},{"id": 1207271,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/677dce9488e154c11afa8fb2fef0725a831453.png","version": "","nm": "憨豆特工3","preShow": false,"sc": 8.6,"globalReleased": true,"wish": 94378,"star": "罗温·艾金森,本·米勒,欧嘉·柯瑞兰寇","rt": "2018-11-23","showInfo": "今天28家影院放映62场","showst": 3,"wishst": 0},{"id": 346465,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/3e073bbe2abbdad57f6768270acbb6d85873182.jpg","version": "v3d imax","nm": "绿毛怪格林奇","preShow": false,"sc": 0,"globalReleased": false,"wish": 8396,"star": "本尼迪克特·康伯巴奇,卡梅伦·丝蕾,拉什达·琼斯","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0},{"id": 341753,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/30aff57a6e035d8a147806b4e207b1c67586143.jpg","version": "","nm": "三只小猪2","preShow": false,"sc": 8.3,"globalReleased": false,"wish": 16481,"star": "王晓彤,李晔,洪海天","rt": "2018-12-08","showInfo": "2018-12-08 本周六重映","showst": 4,"wishst": 0}
],
"comingList": [{"id": 341753,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/30aff57a6e035d8a147806b4e207b1c67586143.jpg","version": "","nm": "三只小猪2","preShow": false,"sc": 8.3,"globalReleased": false,"wish": 16481,"star": "王晓彤,李晔,洪海天","rt": "2018-12-08","showInfo": "2018-12-08 本周六重映","showst": 4,"wishst": 0,"comingTitle": "12月8日 周六"},{"id": 1227795,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/a8cc227734ef0449f457341cfb93aabe187083.jpg","version": "","nm": "云上日出","preShow": false,"sc": 0,"globalReleased": false,"wish": 692,"star": "荣梓杉,关亚,丁宁","rt": "2018-12-11","showst": 1,"wishst": 0,"comingTitle": "12月11日 周二"},{"id": 1238951,"haspromotionTag": false,"img": "https://p1.meituan.net/128.180/movie/cf6230938a60b584e1fe1618ca9b3a2a8575606.jpg","version": "","nm": "谁是坏孩子","preShow": false,"sc": 0,"globalReleased": false,"wish": 313,"star": "安智辉,方从伊,沙学周","rt": "2018-12-11","showst": 1,"wishst": 0,"comingTitle": "12月11日 周二"},{"id": 1228750,"haspromotionTag": false,"img": "https://p1.meituan.net/128.180/movie/03b64c266a863c74d547feaef1859eab3294680.jpg","version": "","nm": "照相师","preShow": false,"sc": 0,"globalReleased": false,"wish": 855,"star": "谢钢,刘牧,康磊","rt": "2018-12-12","showst": 1,"wishst": 0,"comingTitle": "12月12日 周三"},{"id": 1238952,"haspromotionTag": false,"img": "https://p1.meituan.net/128.180/movie/a0f9704bb208c24359df82e88a16315c91983.jpg","version": "","nm": "缘·梦","preShow": false,"sc": 0,"globalReleased": false,"wish": 144,"star": "高蕊,刘滨,张津赫","rt": "2018-12-13","showst": 1,"wishst": 0,"comingTitle": "12月13日 周四"},{"id": 123,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/c304c687e287c7c2f9e22cf78257872d277201.jpg","version": "","nm": "龙猫","preShow": false,"sc": 0,"globalReleased": false,"wish": 106812,"star": "秦岚,糸井重里,岛本须美","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0,"comingTitle": "12月14日 周五"},{"id": 1215919,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/2205b5298f91edc2b072f1dbc8d4e46e5518392.jpg","version": "","nm": "印度合伙人","preShow": false,"sc": 0,"globalReleased": false,"wish": 18902,"star": "阿克谢·库玛尔,索娜姆·卡普尔,雷.雷富","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0,"comingTitle": "12月14日 周五"},{"id": 346465,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/3e073bbe2abbdad57f6768270acbb6d85873182.jpg","version": "v3d imax","nm": "绿毛怪格林奇","preShow": false,"sc": 0,"globalReleased": false,"wish": 8530,"star": "本尼迪克特·康伯巴奇,卡梅伦·丝蕾,拉什达·琼斯","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0,"comingTitle": "12月14日 周五"},{"id": 1219776,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/da4eb7b46debc0ee54ec7b5ff371198c944440.jpg","version": "","nm": "网络谜踪","preShow": true,"sc": 0,"globalReleased": false,"wish": 5858,"star": "约翰·赵,黛博拉·梅辛,米切尔·拉","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0,"comingTitle": "12月14日 周五"},{"id": 1229950,"haspromotionTag": false,"img": "https://p0.meituan.net/128.180/movie/5581cf675d3d623685328facc05abd933568286.jpg","version": "","nm": "午夜整容室","preShow": false,"sc": 0,"globalReleased": false,"wish": 4402,"star": "赖晶晶,王李丹妮,陈垚","rt": "2018-12-14","showInfo": "2018-12-14 下周五上映","showst": 4,"wishst": 0,"comingTitle": "12月14日 周五"}
]
}

修改config\index.js

proxyTable: {
'/api': {target: 'http://localhost:8081',pathRewrite: {'^/api' : '/static/mock'}
}
}

这里使用的是代理请求，访问api目录的时候能代理到/static/mock，端口号改成自己的端口，重新启动webpack则可以在浏览器访问http://localhost:8081/api/home.json

获取异步数据
```
npm install -D axios
npm run dev
```

在src目录创建api\home.js

import axios from 'axios'export function getMoiveList() {return axios.get('/api/home.json', {}).then((res) => {return Promise.resolve(res.data)})
}

因为我们这里是使用滚动条，所以要引入better-scroll组件

npm install -D better-scroll

在src\components\srcoll编写scroll组件

<template><div ref="wrapper"><slot></slot></div>
</template><script type="text/ecmascript-6">import BScroll from 'better-scroll'export default {props: {probeType: {type: Number,default: 1},click: {type: Boolean,default: true},data: {type: Array|Object,default: null},refreshDelay: {type: Number,default: 20}},mounted() {setTimeout(() => {this._initScroll()}, 20)},methods: {_initScroll() {if (!this.$refs.wrapper) {return}this.scroll = new BScroll(this.$refs.wrapper, {probeType: this.probeType,click: this.click})},refresh() {this.scroll && this.scroll.refresh()}},watch: {data() {setTimeout(() => {this.refresh()}, this.refreshDelay)}}}
</script><style scoped lang="stylus">
</style>

在pages\home\component\content\创建Content组件 ```html

?> 这个组件没有什么逻辑性内容，只需要home组件传递menuActive 显示对应的内容即可。- 在home组件引入content组件
```js
import MovieContent from './components/content/Content'
components: {CommonHeader,NavMenu,MovieContent,
},

还需要向Content组件传递menuActive,默认让第几个内如区域显示。

CommonFooter组件开发

在src目录创建pages\footer\Footer.vue

<template><div class="bottom"><div class="btn-item" v-for="(item,index) of itemList" :key="index"><router-link :to="item.href" :class="[bottomActive == index ? 'active' : '']"><span class="iconfont" :class="item.icon"></span><p>{{ item.title }}</p></router-link></div></div>
</template>
<script>
export default {name: 'Footer',props: {bottomActive: {type: Number,default: 0}   },data() {return {itemList: [{id: 0,title: '电影',icon: 'icon-dianying',href: '/home'},{id: 1,title: '影院',icon: 'icon-yingyuan',href: '/cinema'},{id: 2,title: '我的',icon: 'icon-home',href: '/my'}]}}
}
</script><style lang="stylus" scoped>@import '~stylus/variable.styl'.bottomposition: fixed;bottom:0;width: 100%;height: 50px;display: flex;border-top: 1px solid #d6d6d6;background-color: rgba(246,246,246,0.95);.btn-itemtext-decoration: none;flex: 1;font-size:11px;display: flex;flex-direction: column;align-items: center;justify-content: center;atext-decoration: none;color: #999;&.activecolor: $bgColor;.iconfontfont-size: 22px;pmargin-top: 4px;
</style>

在home组件引入CommonFooter组件

import CommonFooter from '../../components/footer/Footer'
components: {
CommonHeader,
NavMenu,
MovieContent,
CommonFooter
},

还需要像Footer组件传递bottomActive,默认让第几个菜单激活。

至此，home组件已经完成，效果如下: