使用vue2.0开发的开眼h5实现

2017-02-28

最近一直在学习vuejs,手痒之余决定使用vuejs做一些东西

正好一直觉得开眼APP的风格很惹人喜欢,所以决定用vuejs仿写一个简单的h5的开眼实现

项目演示:http://douni.one/eyepetizer

TODO

  • 视频列表
  • 视频详情 ✅

项目构建

首先全局安装vue-cli,几个简单的步骤就可以帮助你快速构建一个vue项目。

1
npm install -g vue-cli

然后,利用vue-cli构建一个vue项目,并安装项目依赖

1
2
vue init webpack eyepetizer
cd eyepetizer & npm install

生成修改后的项目文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── build //webpack基本配置文件
├── config //配置文件相关
├── dist //build生成后的文件相关

├── src
│   ├── assets //项目使用scss资源
│   │   └── scss
│   ├── components //组件相关
│   ├── lib //api或其他需要引用的lib
│   ├── router //router相关
│   └── store //vuex store相关

├── static //项目静态文件
└── test //测试文件

项目配置与开发

项目中使用了sass vue-router vuex querystring等库,先安装相关依赖包

1
npm install sass-loader vuex style-loader node-sass moment css-loader axios file-loader querystring vue-router --save-dev

然后在基本页面实现并配置相关路由:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue';
import Router from 'vue-router';

import Hello from 'components/Hello';
import Detail from 'components/Detail';

Vue.use(Router);

export default new Router({
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
},
{
path: '/detail/:vid',
name: 'Detail',
component: Detail,
},
],
});

其中hello为页面首页,最终会实现为视频列表页面,目前先说视频详情页面:

API:

1
2
3
4
5
6
7
8
# 获取视频详情
http://baobab.wandoujia.com/api/v1/video/14416

# 获取关联视频
http://baobab.wandoujia.com/api/v1/video/related/14416?num=5

# 获取当前视频评论
http://baobab.wandoujia.com/api/v1/replies/video?id=14416&num=5

Store:
主要包含:state、action、getters、mutations
在组件method中通过触发dispatch来修改state

1
2
3
4
5
6
7
8
9
fetchData() {
const VID = this.$route.params.vid;
if (!VID) {
this.$router.go('/');
}
this.$store.dispatch('getVideoInfo', { VID });
this.$store.dispatch('getRelateVideoList', { VID });
this.$store.dispatch('getRepliesVideoList', { VID });
}

将state中的对象通过mapGetters映射给自定义变量:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
computed:{
...mapGetters({
video: 'videoInfo',
videoList: 'relateList',
replyList: 'repliesList',
}),
v() {
/* eslint-disable */
const _v = this.video;
return {
title: _v.title,
desc: _v.description,
cat: _v.category,
tags: _v.tags,
url: _v.playUrl,
time: _v.time,
cover: {
backgroundImage: `url(${_v.coverForDetail})`,
},
};
},
}

然后在组件中调用:

1
2
3
4
5
6
7
8
9
10
<div class="vue-meta-positioner">
<div class="video-meta">
<h1>{{v.title}}</h1>
<div class="divider divider-short"></div>
<p>{{v.cat}} / {{v.time}}</p>
<p class="desciption">
{{v.desc}}
</p>
</div>
</div>

最终效果:
Douni.one

部署项目

执行命令

1
npm run build

然后会生成一个dist文件夹,该文件夹中就是我们可以用来发布的代码

我将生成的项目部署到了GitHub pages和coding pages,其中国内解析走coding,而国外解析会解析到GitHub

具体项目演示地址:http://douni.one/eyepetizer

项目源码地址:
Github源码: https://github.com/virgoone/eyepetizer/
Coding源码: https://coding.net/u/koyasite/p/eyepetizer/

~未完待续