Vue-cli-webpack搭建斗鱼直播步骤详解


Posted in Javascript onNovember 17, 2017

前言

想必大家都看过斗鱼直播吧?这次在下使用从github上面摸下来的API,为大家重现一下斗鱼网站的搭建,使用vue-cli-webpack来实现。

声明

本文章所用API均从网络获取,本文作者不承担任何法律责任,请阅读本文的小伙伴们用于学习用途,不能用于商业!

如有侵权行为,请与作者联系,作者将于2日内删除。

效果

pc端

Vue-cli-webpack搭建斗鱼直播步骤详解

移动端

Vue-cli-webpack搭建斗鱼直播步骤详解

开始

好,扯了这么久的淡,该开始构建项目了

项目初始化

初始化文件夹

打开一个新文件夹,在命令行输入:

vue init webpack

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

Vue-cli-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-flexible
npm i -S axios
npm 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,参照下图:

Vue-cli-webpack搭建斗鱼直播步骤详解

红线区域我们引入了移动适配的lib-flexible,和font-awesome,style公共样式

接下来,我们来引入axios和vue-axios,请看下图:

Vue-cli-webpack搭建斗鱼直播步骤详解

这里我们引入了vue-axios和axios,并通过vue.use来进行绑定

跑起项目

准备工作已经做完了,接下来可以跑起项目了:

npm run dev

根据命令行的提示打开网页即可看到效果:

Vue-cli-webpack搭建斗鱼直播步骤详解

好的,我们的项目初始化就到这里了。

配置映射和测试斗鱼API

配置映射

来到根目录下的 config/index.js 这里是配置开发,构建,及路由映射的地方

Vue-cli-webpack搭建斗鱼直播步骤详解

如图修改proxyTable中内容,这里解释一下几个参数:

target : 目标地址,

changeOrigin : 是否跨域,

pathRewrite : 键值对中用值替换键的值,其中^是正则中表示开始的符号

随手请求一个API

进入src/App.vue,如下修改文件:

Vue-cli-webpack搭建斗鱼直播步骤详解

created是我们的生命钩子函数,vue实例在created阶段会执行里面的代码。

this.$http相当于this.axios,$http的具体实现可以去node_modules里面看,很简单的

重启webpack服务,看下效果

Vue-cli-webpack搭建斗鱼直播步骤详解

ctrl+c
npm run dev

看到以上效果的话,证明数据请求成功了。

搭建首页应用

思维导图解析

我们要写的应用较为复杂,写vue的项目就是这样,需要清晰的思想,不然很容易崩溃,最后重来

Vue-cli-webpack搭建斗鱼直播步骤详解

好,接下来为大家讲解一下我们的组件:

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,修改内容为:

<template lang="html">
 <div class="side-menu" @click = "hideSide">
 <ul>
 <router-link v-for = "(item,index) in list" :to="item.url" :key = "index">
 {{item.title}}
 <i class = "icon-chevron-right"></i>
 </router-link>
 </ul>
 </div>
</template>
<script>
export default {
 data(){
 return {
 list : [
 {title : "首页",url : "/"},
 {title : "全部分类",url : "/category"}
 ]
 }
 },
 methods : {
 hideSide(){
 this.$emit("hide")
 }
 }
}
</script>
<style lang="css">
 .side-menu {
 background: rgba(10,10,10,.3);
 height: 100%;
 position: fixed;
 width: 100%;
 top: 0;
 padding-top: 44px;
 z-index: 11;
 }
 .side-menu ul {
 width: 70%;
 background: #282828;
 height: 100%;
 border-top: 1px solid #222;
 }
 .side-menu ul li {
 height: 50px;
 border-bottom: 1px dotted #333;
 font-size: 14px;
 line-height: 50px;
 padding: 0 30px 0 20px;
 color: #9a9a9a;
 }
 .side-menu ul li i {
 float: right;
 line-height: 50px;
 }
</style>

这里解释一下文件里面的内容:

文件分为三大块

template
script
style

这些内容通过script中node的export方法推出去

其中template渲染了几个router-link,用来跳转路由

script定义了data和method

style写了样式

然后打开src/App.vue,修改里面的内容,追加下图内容:

Vue-cli-webpack搭建斗鱼直播步骤详解

好的,我们的SideMenu组件就注册完成了。

搭建router-view内容

好的,我们接下来做router-view的内容

bus-中央总线

在做之前,我们需要了解一个新的概念-bus,又称中央总线

Vue-cli-webpack搭建斗鱼直播步骤详解

好的,又是之前那张思维导图,不过是不是多出了三台车呢?

没错,这就是我们的bus。

当appheader想加载侧边栏时,是不能穿越徒步穿越山和大海的,老司机还是要开车的是不是

这个时候我们坐公交就行了,告诉app,把我给拉出来

当然,side-menu和app之间相距不远,父子组件是可以直接绑定的

在src目录下创建bus.js,内容为

Vue-cli-webpack搭建斗鱼直播步骤详解

这是我们的bus,说白了就是一个对象,只不过借用了vue的消息管道,大家也可以自己写个管道

制造home主页路由

在src目录下创建pages目录,这个目录我们用来存放router-vue的内容

然后我们在src/pages/下创建一个home.vue组件,用来做home的内容,写下以下内容:

<template lang="html">
 <div class="mr-root">
 <app-header>
 <p class = "title">斗鱼TV</p>
 </app-header>
 <loading v-if="showLoading"></loading>
 </div>
</template>
<script>
import Public from "../public"
export default {
 mixins : [
 Public
 ],
 data(){
 return {
 showLoading : true
 }
 }
}
</script>
<style lang="css" scoped>
</style>

解释一下,这里使用了app-header和loading组件,由Public导入(等会写)。

mixins是一个混合物,能够自动把模组分析,加载到当前实例中。

data中 showLoading和v-if配合使用,用来关闭loading效果

如果不清楚的话可以看下思维导图

public公用模组

public是一个模组集合,我们在开发的时候可能不同页面要使用相同的组件,这时就需要public打包处理了。
在src中新建public.js,内容如下:

import AppHeader from './components/AppHeader'
import Loading from './components/Loading'
export default{
 components: {
 AppHeader,
 Loading
 }
}

上文我们导入了AppHeader和Loading模块,并设置了默认导出

好,那么我们来写两个子模组,

AppHeader

在components中新建一个文件AppHeader.vue,代码如下

<template lang="html">
 <header>
 <i class = "icon-reorder" @click = "showSlide"></i>
 <slot></slot>
 <i class = "icon-user"></i>
 </header>
</template>
<script>
import bus from "../bus"
export default {
 methods : {
 showSlide(){
 bus.$emit('showSide')
 }
 }
}
</script>
<style lang="css" scoped>
 header {
 height: 44px;
 background: #333;
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 z-index: 100;
 padding: 0 15px;
 color: #fff;
 line-height: 44px;
 font-size: 16px;
 }
 header i {
 color: #999;
 }
 .title {
 margin-left: 15px;
 display: inline-block;
 }
 .icon-user {
 float: right;
 line-height: 44px;
 }
</style>

定义了基本的头部,给加载更多绑定了一个事件,通过bus进行传递,由app.vue来实现

Loading组件

src/components/里面新建一个Loading.vue,代码如下:

<style lang="css">
 .loading {
 height: 100%;
 position: fixed;
 z-index: 10;
 width: 100%;
 background: #062734;
 opacity: .4;
 }
 .loading img {
 width: 100%;
 height: auto;
 position: absolute;
 top: calc(50% - 140px);
 }
</style>

就添加了一张gif图而已,非常简单的

bus事件的处理

好的,既然我们的appheader已经发车了,那么应该在app.vue根路由里面开个公交车站,来接收巴士:

修改App.vue:

<template>
 <div id="app">
 <transition name = "side">
 <side-menu v-show = "show" @hide = "hideSide"></side-menu>
 </transition>
 <router-view/>
 </div>
</template>
<script>
import SideMenu from "./components/SideMenu"
import bus from "./bus"
export default {
 name: 'app',
 components : {
 SideMenu
 },
 created(){
 this.$http.get(`/douyuapi/RoomApi/live?offset=1&limit=20`).then(res=>{
 console.log(res.data.data);
 })
 },
 data(){
 return {
 show : false
 }
 },
 mounted () {
 bus.$on("showSide",this.side)
 },
 methods : {
 side(){
 this.show = !this.show
 },
 hideSide(){
 this.show = false
 }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

修改路由

修改根路由/src/router/index.js为:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Home',
 component: Home
 }
 ]
})

增加HomeItem

好的,我们有了以上功能以后呢,还需要在斗鱼主页中增加聊天室列表,在components目录中新建文件HomeItem.vue

<template lang="html">
 <div class="mr-item">
 <router-link :to="'/room/'+room.room_id">
 <img :src="room.room_src" alt="">
 <div class="room-info">
 <span class = "nickname">{{room.nickname}}</span>
 <span class = "count">
 <i class = "icon-group"></i>
 {{room.online || number}}
 </span>
 </div>
 <div class="room-title">
 <i class = "icon-desktop"></i>
 {{room.room_name || message}}
 </div>
 </router-link>
 </div>
</template>
<script>
export default {
 props : ["room"]
}
</script>
<style lang="css" scoped>
 .mr-item {
 margin-top: 10px;
 float: left;
 width: 4.4rem;
 margin-right: .3rem;
 position: relative;
 }
 .mr-item img {
 width: 100%;
 height: 2.6rem;
 border-radius: 5px;
 }
 .room-info {
 position: absolute;
 bottom: 33px;
 color: #fff;
 padding: 0 5px;
 left: 0;
 right: 0;
 overflow: hidden;
 background: rgba(10,10,10,.5);
 line-height: 24px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 }
 .room-info .count {
 float: right;
 }
 .room-title {
 line-height: 30px;
 }
</style>

home.vue中加载homeitem

我们需要在Home.vue中加载HomeItem,修改home.vue为

<template lang="html">
 <div class="mr-root">
 <app-header>
 <p class = "title">斗鱼TV</p>
 </app-header>
 <loading v-if="showLoading"></loading>
 <home-item v-for = "(room,index) in roomList" :room = "room" :key = "index">
 </home-item>
 <p v-if = "error">加载失败,请稍后再试...</p>
 <div class="clear"></div>
 <div class="load-more">
 <span @click = "loadMore">点击加载更多</span>
 </div>
 </div>
</template>
<script>
import Public from "../public"
import HomeItem from "../components/HomeItem"
export default {
 mixins : [
 Public
 ],
 data(){
 return {
 showLoading : true,
 error : false,
 roomList : [],
 page : 0
 }
 },
 components : {
 HomeItem
 },
 created(){
 this.getInfo(this.page)
 },
 methods : {
 getInfo(page){
 this.$http.get(`/douyuapi/RoomApi/live?offset=1&limit=20`).then(res=>{
 this.error = false
 this.roomList = this.roomList.concat(res.data.data)
 setTimeout(()=>{
 this.showLoading = false
 },1000)
 })
 .catch(err=>{
 this.error = true
 this.showLoading = false
 })
 },
 loadMore(){
 this.page++
 this.getInfo(this.page)
 }
 }
}
</script>
<style lang="css">
.mr-content {
 padding: 44px 0 0 .3rem;
 overflow: hidden;
}
.load-more {
 margin: 10px;
 text-align: center;
}
.load-more span {
 display: inline-block;
 line-height: 30px;
 padding: 0 20px;
 border-radius: 10px;
 border: 1px solid #000;
}
</style>

现在看下页面,是不是已经出来了呢?

Javascript 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
javascript中this的四种用法
May 11 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 #Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 #Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 #Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 #Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 #Javascript
JS实现的数组去除重复数据算法小结
Nov 17 #Javascript
bootstrap轮播模板使用方法详解
Nov 17 #Javascript
You might like
php中require和require_once的区别说明
2014/02/27 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
jQuery实现checkbox的简单操作
2017/11/18 jQuery
如何使用puppet替换文件中的string
2018/12/06 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
一些Unix笔试题和面试题
2012/09/25 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
购房协议书范本
2014/10/02 职场文书
教师年度个人总结
2015/02/11 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android