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

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

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

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

TODO

  • 视频列表

  • 视频详情 ✅

项目构建

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

npm install -g vue-cli

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

vue init webpack eyepetizer
cd eyepetizer & npm install

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

├── 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等库,先安装相关依赖包

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

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

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:

# 获取视频详情
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

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映射给自定义变量:

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})`,
      },
    };
  },
}

然后在组件中调用:

<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

部署项目

执行命令

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/

~未完待续

原文链接:http://blog.marryto.me/vuejs-eyepetizer/

阅读 3k

推荐阅读
koya.blog
用户专栏

个人简介

1 人关注
1 篇文章
专栏主页