前言
想必大家都看过斗鱼直播吧？这次在下使用从github上面摸下来的API，为大家重现一下斗鱼网站的搭建，使用vue-cli-webpack来实现。
声明
本文章所用API均从网络获取，本文作者不承担任何法律责任，请阅读本文的小伙伴们用于学习用途，不能用于商业！
如有侵权行为，请与作者联系，作者将于2日内删除。
效果
pc端
移动端
开始
好，扯了这么久的淡，该开始构建项目了
项目初始化
初始化文件夹
打开一个新文件夹，在命令行输入：
vue init webpack
如果显示vue not found,那么该去下载vue-cli，如果webpack未找到就去下载webpack
到这一步以后就ctrl + c,退出终端
安装依赖
退出命令行之后，输入以下指令：
chromedriver 是安装必备的包，镜像好像有问题，我们提前装一下。
npm install
GFW不是吹的，外网真的很慢，大家泡杯茶慢慢等
趁着等的时候，我们来下载几个样式和图片，运行
来下载assets文件，覆盖 assets文件夹到 项目文件/src 中
我们还需要lib-flexible来解决移动端适配的问题,axios和vue-axios来方便请求我们的数据
引入安装的包
大家可以进入到src目录下，这里简要介绍下各个文件的功能
我们来修改main.js,参照下图:
红线区域我们引入了移动适配的lib-flexible,和font-awesome,style公共样式
接下来，我们来引入axios和vue-axios，请看下图：
这里我们引入了vue-axios和axios,并通过vue.use来进行绑定
跑起项目
准备工作已经做完了，接下来可以跑起项目了：
npm run dev
根据命令行的提示打开网页即可看到效果：
好的，我们的项目初始化就到这里了。
配置映射和测试斗鱼API
配置映射
来到根目录下的 config/index.js 这里是配置开发，构建，及路由映射的地方
如图修改proxyTable中内容，这里解释一下几个参数：
target : 目标地址,
changeOrigin : 是否跨域,
pathRewrite : 键值对中用值替换键的值，其中^是正则中表示开始的符号
随手请求一个API
进入src/App.vue，如下修改文件：
created是我们的生命钩子函数，vue实例在created阶段会执行里面的代码。
this.$http相当于this.axios，$http的具体实现可以去node_modules里面看，很简单的
重启webpack服务，看下效果
ctrl+c npm run dev
看到以上效果的话，证明数据请求成功了。
搭建首页应用
思维导图解析
我们要写的应用较为复杂，写vue的项目就是这样，需要清晰的思想，不然很容易崩溃，最后重来
好，接下来为大家讲解一下我们的组件：
Root是根组件，一切的源（废话）
App，应用组件，对应src/App.vue Side-menu :侧边栏，因为较为容易且不需要改变单页路由来显示不同内容，所以直接放在app组件里边 router-view : 这是vue-router的子路由显示面板，通过src/router/index.js来控制 home : 主页视图文件 public : 公用组件，亦可在其他页面使用，降低工作量 AppHeader : 应用头部组件 Loading : 加载中的组件，就一张gif
侧边栏SideMenu组件
在src/components目录中新建一个文件，名为SideMenu.vue,修改内容为：