Vue-cli-webpack 从零开始的斗鱼直播

Posted SegmentFault

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-cli-webpack 从零开始的斗鱼直播相关的知识,希望对你有一定的参考价值。

前言

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

声明

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

开始之前

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

  • nodejs

  • webpack

  • vue

  • vue-cli

  • vue-router

效果

pc端


移动端

Vue-cli-webpack 从零开始的斗鱼直播(一)


开始

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

项目初始化

初始化文件夹

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

 
   
   
 
  1. vue init webpack

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

Vue-cli-webpack 从零开始的斗鱼直播(一)

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

安装依赖

退出命令行之后,输入以下指令:

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

chromedriver 是安装必备的包,镜像好像有问题,我们提前装一下。

 
   
   
 
  1. npm install

GFW不是吹的,外网真的很慢,大家泡杯茶慢慢等 趁着等的时候,我们来下载几个样式和图片,运行

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

来下载assets文件,覆盖 assets文件夹到 项目文件/src 中

 
   
   
 
  1. npm i -S lib-flexible

  2. npm i -S axios

  3. 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来进行绑定

跑起项目

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

 
   
   
 
  1. npm run dev

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

Vue-cli-webpack 从零开始的斗鱼直播(一)

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

配置映射和测试斗鱼API

配置映射

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

Vue-cli-webpack 从零开始的斗鱼直播(一)

随手请求一个API

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

Vue-cli-webpack 从零开始的斗鱼直播(一)

created是我们的生命钩子函数,vue实例在created阶段会执行里面的代码。 this.$http相当于this.axios,$http的具体实现可以去node_modules里面看,很简单的

重启webpack服务,看下效果

 
   
   
 
  1. ctrl+c

  2. npm run dev

Vue-cli-webpack 从零开始的斗鱼直播(一)

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

思维导图解析

我们要写的应用较为复杂,写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,修改内容为:

 
   
   
 
  1. <template lang="html">

  2.  <div class="side-menu" @click = "hideSide">

  3.    <ul>

  4.      <router-link v-for = "(item,index) in list" :to="item.url" :key = "index">

  5.        {{item.title}}

  6.        <i class = "icon-chevron-right"></i>

  7.      </router-link>

  8.    </ul>

  9.  </div>

  10. </template>

  11. <script>

  12. export default {

  13.  data(){

  14.    return {

  15.      list : [

  16.        {title : "首页",url : "/"},

  17.        {title : "全部分类",url : "/category"}

  18.      ]

  19.    }

  20.  },

  21.  methods : {

  22.    hideSide(){

  23.      this.$emit("hide")

  24.    }

  25.  }

  26. }

  27. </script>

  28. <style lang="css">

  29.  .side-menu {

  30.    background: rgba(10,10,10,.3);

  31.    height: 100%;

  32.    position: fixed;

  33.    width: 100%;

  34.    top: 0;

  35.    padding-top: 44px;

  36.    z-index: 11;

  37.  }

  38.  .side-menu ul {

  39.    width: 70%;

  40.    background: #282828;

  41.    height: 100%;

  42.    border-top: 1px solid #222;

  43.  }

  44.  .side-menu ul li {

  45.    height: 50px;

  46.    border-bottom: 1px dotted #333;

  47.    font-size: 14px;

  48.    line-height: 50px;

  49.    padding: 0 30px 0 20px;

  50.    color: #9a9a9a;

  51.  }

  52.  .side-menu ul li i {

  53.    float: right;

  54.    line-height: 50px;

  55.  }

  56. </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,又称中央总线

好的,又是之前那张思维导图,不过是不是多出了三台车呢? 没错,这就是我们的bus。 当appheader想加载侧边栏时,是不能穿越徒步穿越山和大海的,老司机还是要开车的是不是 这个时候我们坐公交就行了,告诉app,把我给拉出来 当然,side-menu和app之间相距不远,父子组件是可以直接绑定的

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

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

制造home主页路由

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

 
   
   
 
  1. <template lang="html">

  2.  <div class="mr-root">

  3.    <app-header>

  4.      <p class = "title">斗鱼TV</p>

  5.    </app-header>

  6.    <loading v-if="showLoading"></loading>

  7.  </div>

  8. </template>

  9. <script>

  10. import Public from "../public"

  11. export default {

  12.  mixins : [

  13.    Public

  14.  ],

  15.  data(){

  16.    return {

  17.      showLoading : true

  18.    }

  19.  }

  20. }

  21. </script>

  22. <style lang="css" scoped>

  23. </style>

解释一下,这里使用了app-header和loading组件,由Public导入(等会写)。 mixins是一个混合物,能够自动把模组分析,加载到当前实例中。 data中 showLoading和v-if配合使用,用来关闭loading效果 如果不清楚的话可以看下思维导图

public公用模组

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

 
   
   
 
  1. import AppHeader from './components/AppHeader'

  2. import Loading from './components/Loading'

  3. export default{

  4.  components: {

  5.    AppHeader,

  6.    Loading

  7.  }

  8. }

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

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

AppHeader

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

 
   
   
 
  1. <template lang="html">

  2.  <header>

  3.    <i class = "icon-reorder" @click = "showSlide"></i>

  4.    <slot></slot>

  5.    <i class = "icon-user"></i>

  6.  </header>

  7. </template>

  8. <script>

  9. import bus from "../bus"

  10. export default {

  11.  methods : {

  12.    showSlide(){

  13.      bus.$emit('showSide')

  14.    }

  15.  }

  16. }

  17. </script>

  18. <style lang="css" scoped>

  19.  header {

  20.    height: 44px;

  21.    background: #333;

  22.    position: fixed;

  23.    left: 0;

  24.    right: 0;

  25.    top: 0;

  26.    z-index: 100;

  27.    padding: 0 15px;

  28.    color: #fff;

  29.    line-height: 44px;

  30.    font-size: 16px;

  31.  }

  32.  header i {

  33.    color: #999;

  34.  }

  35.  .title {

  36.    margin-left: 15px;

  37.    display: inline-block;

  38.  }

  39.  .icon-user {

  40.    float: right;

  41.    line-height: 44px;

  42.  }

  43. </style>

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

Loading组件

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

 
   
   
 
  1. <style lang="css">

  2.  .loading {

  3.    height: 100%;

  4.    position: fixed;

  5.    z-index: 10;

  6.    width: 100%;

  7.    background: #062734;

  8.    opacity: .4;

  9.  }

  10.  .loading img {

  11.    width: 100%;

  12.    height: auto;

  13.    position: absolute;

  14.    top: calc(50% - 140px);

  15.  }

  16. </style>

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

bus事件的处理

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

 
   
   
 
  1. <template>

  2.  <div id="app">

  3.    <transition name = "side">

  4.      <side-menu v-show = "show" @hide = "hideSide"></side-menu>

  5.    </transition>

  6.    <router-view/>

  7.  </div>

  8. </template>

  9. <script>

  10. import SideMenu from "./components/SideMenu"

  11. import bus from "./bus"

  12. export default {

  13.  name: 'app',

  14.  components : {

  15.    SideMenu

  16.  },

  17.  created(){

  18.    this.$http.get(`/douyuapi/RoomApi/live?offset=1&limit=20`).then(res=>{

  19.      console.log(res.data.data);

  20.    })

  21.  },

以上是关于Vue-cli-webpack 从零开始的斗鱼直播的主要内容,如果未能解决你的问题,请参考以下文章

斗鱼直播 怎么在游戏界面看到弹幕

scrapy初探-斗鱼直播信息抓取

斗鱼TV安卓版下载|斗鱼TV安卓版免费下载

爬虫实战斗鱼直播(你想看的都有呀!)

斗鱼直播延迟问题

斗鱼宣布获C轮15亿融资 直播行业进入资本时代