使用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>

最終效果：

部署項目

執行命令

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/