使用 vue2.0 開發的開眼視頻詳情

最近一直在學習vuejs，手癢之余決定使用vuejs做一些東西

正好一直覺得開眼APP的風格很惹人喜歡，所以決定用vuejs仿寫一個簡單的h5的開眼實現

TODO

• 視頻列表
• 視頻詳情 :white_check_mark:

項目構建

首先全局安裝 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#=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文件夾，該文件夾中就是我們可以用來發布的代碼

 

來自：http://blog.marryto.me/vuejs-eyepetizer/