使用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 eyepetizercd eyepetizer & npm install

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

项目配置与开发#

项目中使用了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

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

其中hello为页面首页，最终会实现为视频列表页面，目前先说视频详情页面：

API：

Store： 主要包含：state、action、getters、mutations 在组件method中通过触发dispatch来修改state

将state中的对象通过mapGetters映射给自定义变量：

然后在组件中调用：

最终效果：

部署项目#

执行命令

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/

～未完待续