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查询DBpedia小应用实例学习
Mar 07 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python 循环while和for in简单实例
2016/08/16 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
化学相关工作求职信
2013/10/02 职场文书
出国留学自荐信
2013/10/25 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
校长就职演讲稿
2014/01/06 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
暑期社会实践个人总结
2015/03/06 职场文书