使用 vue2.0 开发的开眼视频详情

   <p>最近一直在学习vuejs，手痒之余决定使用vuejs做一些东西</p>    <p>正好一直觉得开眼APP的风格很惹人喜欢，所以决定用vuejs仿写一个简单的h5的开眼实现</p>    <h2>TODO</h2>    <ul>     <li>视频列表</li>     <li>视频详情 :white_check_mark:</li>    </ul>    <h2>项目构建</h2>    <p>首先全局安装 vue-cli ，几个简单的步骤就可以帮助你快速构建一个vue项目。</p>    <pre>  <code class="language-javascript">npm install -g vue-cli  </code></pre>    <p>然后，利用vue-cli构建一个vue项目，并安装项目依赖</p>    <pre>  <code class="language-javascript">vue init webpack eyepetizer  cd eyepetizer & npm install  </code></pre>    <p>生成修改后的项目文件如下</p>    <pre>  <code class="language-javascript">├── build //webpack基本配置文件  ├── config //配置文件相关  ├── dist //build生成后的文件相关  │  ├── src  │   ├── assets //项目使用scss资源  │   │   └── scss  │   ├── components //组件相关  │   ├── lib //api或其他需要引用的lib  │   ├── router //router相关  │   └── store //vuex store相关  │  ├── static //项目静态文件  └── test //测试文件  </code></pre>    <h2>项目配置与开发</h2>    <p>项目中使用了sass vue-router vuex querystring等库，先安装相关依赖包</p>    <pre>  <code class="language-javascript">npm install sass-loader vuex style-loader node-sass moment css-loader axios file-loader querystring vue-router --save-dev  </code></pre>    <p>然后在基本页面实现并配置相关路由：</p>    <pre>  <code class="language-javascript">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,      },    ],  });  </code></pre>    <p>其中hello为页面首页，最终会实现为视频列表页面，目前先说视频详情页面：</p>    <p>API：</p>    <pre>  <code class="language-javascript"># 获取视频详情  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  </code></pre>    <p>Store：</p>    <p>主要包含：state、action、getters、mutations</p>    <p>在组件method中通过触发dispatch来修改state</p>    <pre>  <code class="language-javascript">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 });  }  </code></pre>    <p>将state中的对象通过mapGetters映射给自定义变量：</p>    <pre>  <code class="language-javascript">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})`,        },      };    },  }  </code></pre>    <p>然后在组件中调用：</p>    <pre>  <code class="language-javascript"><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>  </code></pre>    <p>最终效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fdef7a720149377f673b890415b566b8.png"></p>    <h2>部署项目</h2>    <p>执行命令</p>    <pre>  <code class="language-javascript">npm run build  </code></pre>    <p>然后会生成一个dist文件夹，该文件夹中就是我们可以用来发布的代码</p>    <p> </p>    <p>来自：http://blog.marryto.me/vuejs-eyepetizer/</p>    <p> </p>