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 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
angular动态表单制作
Feb 23 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 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 实用代码收集
2010/01/22 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中的is和id用法分析
2015/01/26 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
财务副总经理工作职责
2013/11/25 职场文书
教师节活动总结
2014/08/29 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
党员心得体会范文2016
2016/01/23 职场文书
小学教师教学反思
2016/02/24 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang