Vue2.5从零开发猫眼④——Home页开发
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
修改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目录下，方便引用
CommonHeader 只做页面显示，不处理逻辑，如果其他组件需要引用它时候需要传参数，和监听对应的goBack函数。
NavMenu组件开发
因为NavMenu只是home页的组件，所以在home组件页下创建components\nav-menu\NavMenu组件
这个组件需要注意的是使用了选中的menu下划线使用了calc的函数，具体calc使用可以去网上搜索
然后再Home.vue里引用该组件
1. import NavMenu from './components/nav-menu/NavMenu'
2. components: {
CommonHeader,
NavMenu
},
3. 内容组件开发
-
先获取数据接口 再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组件
-
在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
{{ item.title }}
- 在home组件引入CommonFooter组件
还需要像Footer组件传递bottomActive,默认让第几个菜单激活。import CommonFooter from '../../components/footer/Footer' components: { CommonHeader, NavMenu, MovieContent, CommonFooter },
至此，home组件已经完成，效果如下:
- 在home组件引入CommonFooter组件