最近一直在学习vuejs,手痒之余决定使用vuejs做一些东西
正好一直觉得开眼APP的风格很惹人喜欢,所以决定用vuejs仿写一个简单的h5的开眼实现
项目演示:http://douni.one/eyepetizer
TODO
- 视频列表
- 视频详情 ✅
项目构建
首先全局安装vue-cli,几个简单的步骤就可以帮助你快速构建一个vue项目。
npm install -g vue-cli
然后,利用vue-cli构建一个vue项目,并安装项目依赖
vue init webpack eyepetizercd 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/
~未完待续