web前端开发，利用Vue-cli-webpack，制作斗鱼直播页面实现

前言

想必我们都看过斗鱼直播吧？这次在下运用从github上面摸下来的API，为我们重现一下斗鱼网站的建立，运用vue-cli-webpack来完成。文章内容较多，能够慢慢看。

声明

本文章所用API均从网络获取，本文作者不承当任何法律责任，请阅读本文的小伙伴们用于学习用处，不能用于商业！ 如有侵权行为，请与作者联系，作者将于2日内删去。

如果你们想进名企面试欢迎到我的群里进行交流学习,群号：614315657 。欢迎我们进去交流学习，我们一同学习一同行进，我觉得程序员不应该中止脚步，而是一向在学习的道路上一向行进。

开端之前

本文假设您学习了以下相关知识

• nodejs

• webpack

• vue

• vue-cli

• vue-router

• 作用

pc端

移动端

开端

好，扯了这么久的淡，该开端构建项目了

项目初始化

初始化文件夹

翻开一个新文件夹，在命令行输入：

vue init webpack

如果显示vue not found,那么该去下载vue-cli，如果webpack未找到就去下载webpack

到这一步今后就ctrl + c ,退出终端

装置依赖

退出命令行之后，输入以下指令：

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

chromedriver 是装置必备的包，镜像如同有问题，我们提早装一下。

npm install

GFW不是吹的，外网真的很慢，我们泡杯茶慢慢等 趁着等的时分，我们来下载几个款式和图片，运行

git clone https://github.com/YexChen/douyu_assets.git

来下载assets文件，掩盖 assets文件夹到 项目文件/src 中

npm i -S lib-flexiblenpm i -S axiosnpm i -S vue-axios

我们还需求lib-flexible来解决移动端适配的问题,axios和vue-axios来方便恳求我们的数据

引入装置的包

我们能够进入到src目录下，这儿简要介绍下各个文件的功能 assets 放静态内容的当地，可是支持预编译

components 放组件的当地，当然也能够别具一格随便创个文件夹代替之 router/index.js router文件夹是放路由的当地，index.js是我们的根路由

app.vue vue-cli帮我们生成好的一个组件(根组件)，没什么好稀奇的 main.js webpack的进口文件，聚合vue运用里边的东西

我们来修正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+cnpm run dev

看到以上作用的话，证明数据恳求成功了。

思想导图解析

我们要写的运用较为复杂，写vue的项目就是这样，需求清晰的思想，否则很简单溃散，最终重来

好，接下来为我们讲解一下我们的组件： Root是根组件，一切的源（废话）

• Side-menu :侧边栏，由于较为简单且不需求改动单页路由来显示不同内容，所以直接放在app组件里边

• router-view : 这是vue-router的子路由显示面板，经过src/router/index.js来操控

• home : 主页视图文件

• public : 共用组件，亦可在其他页面运用，降低工作量

• AppHeader : 运用头部组件

• Loading : 加载中的组件，就一张gif

侧边栏SideMenu组件

在src/components目录中新建一个文件，名为SideMenu.vue,修正内容为：