vue+node.js手把手教你搭建一个直播平台（三）

上一期，帅气的小羽给老铁们介绍了直播平台的项目的前端框架的搭建，这期就让小羽带大家切图，没错啦，就是老铁们心心念念的切图啦。

补充上期遗漏的内容

但是在正式开启这期内容前，先补充点上期的内容

配置全局less

在assets文件夹下新增style/common.less

@primary-color:#2d8cf0;
.live-line{
    height: 1px;
    background: #eeeeee;
}

修改vue.config.js如下

/*
 * @description: 
 * @author: 小羽
 * @github: https://github.com/lyff1006
 * @lastEditors: 小羽
 * @Date: 2019-10-09 21:55:04
 * @LastEditTime: 2020-09-12 10:53:30
 * @Copyright: 1.0.0
 */
const path = require("path")
function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [path.resolve(__dirname, "./src/assets/style/common.less")]
        })
}

module.exports = {
    //eslint开关
    lintOnSave: false,
    //生成环境是否生成map文件
    productionSourceMap: false,
    devServer: {
        host: '0.0.0.0',
        //代理配置
        proxy: {
            '/webserve': {
                target: 'http://127.0.0.1:8512',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/webserve': ''
                }
            },
        },
    },
    chainWebpack: (config) => {
        //配置less
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },
}

---------------------------------------------------------分割线---------------------------------------------------------------

好了，正式开启本期教程。

我们先来看下初步的成果图

首页

image-20200912112533926

直播房间页

image-20200912115745650

帅气的小伙伴们，有发现什么共同的特点了吗？

没错，就是它们的头部导航栏都是一样的，而vue中一个很重要的概念就是组件。什么是vue中的组件，小羽的个人理解就是一个小的功能模块，而这个功能模块可以拥有自己的方法和样式，并且可以引入到其他的页面中，成为其中的一部分。因此我们可以将头部导航提取出来，作为一个公共的组件。此外我们拥有两个页面，因此就需要创建相关的路由。

1.路由

1.1 编写路由表

这里主要是控制我们以后路由要跳转的地方。顺便添加一个坑，路由表中新增meta属性，meta中的noHeader用来控制我们的头部导航栏的显示隐藏。为啥要添加这的东西呢？因为待会我们的头部导航栏将会全局挂载，这样的话就不需要每个页面都单独引入，老铁们这样子是不是感觉方便了很多呢？但是这样又带来了另外一个问题，就是假如有某个页面突然不想要这个导航了，那可怎么办呢？所以我们先在这里添加一个坑，后面再解析怎么使用这个东西。

image-20200912121934386

/*
 * @description: 
 * @author: 小羽
 * @github: https://github.com/lyff1006
 * @lastEditors: 小羽
 * @Date: 2019-10-09 21:59:23
 * @LastEditTime: 2020-09-12 12:16:29
 * @Copyright: 1.0.0
 */
import Vue from 'vue'
import Router from 'vue-router'
import baseEnv from "@/assets/js/config.js"
Vue.use(Router)

export default new Router({
    mode:baseEnv.mode==="electron"?"hash":"history",
    routes: [
        {
            path: '/',
            redirect: {
                name: 'index'
            }
        },
        {
            path: '/index',
            name:"index",
            meta:{
                noHeader:false
            },
            component: () => import("@/views/home/roomList.vue"),
        },
        {
            path: "/room",
            name:"room",
            meta:{
                noHeader:false
            },
            component: () => import("@/views/live/room.vue")
        }
    ]
})

1.2 挂载路由

src下的main.js，通过import引入我们刚刚新建的路由表。然后直接在new Vue()中挂载。

/*
 * @description: 
 * @author: 小羽
 * @github: https://github.com/lyff1006
 * @lastEditors: 小羽
 * @Date: 2020-09-12 10:45:54
 * @LastEditTime: 2020-09-12 12:15:15
 * @Copyright: 1.0.0
 */
import Vue from 'vue'
import App from './App.vue'
import router from './router'

//引入iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);

Vue.config.productionTip = false

//将baseEnv注入到vue原型中
import baseEnv from "@/assets/js/config.js"
Vue.prototype.$baseEnv = baseEnv;

//将common注入到vue原型中
import {common} from "@/assets/js/common.js"
Vue.prototype.$commonFunc = common

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

1.3 修改app.vue

修改src下的app.vue

然后ctrl+s保存，然后准备美滋滋的打开页面。我靠，居然报错了！！！这怎么能忍？赶快掏出24k纯金的眼睛（小羽的是made in China的人眼，正牌的！老铁们中有没有内种，咳咳，钛合金狗眼呀？【乖巧】），查看一下报错信息。哦，原来是缺少路由相关的页面呀。小问题，待我们把它给加上去就好了。

image-20200912124451724

image-20200912124545168

roomList.vue

room.vue

修改完后再次运行npm run serve，然后我们可以修改最后一个单词来进行路由切换。

image-20200912124745721

image-20200912124843845

2.全局头部导航

2.1 全局头部导航栏的切图

这里就没啥好说了吧？都是这么聪明的老铁们，一看就懂。

image-20200912125242259

然后这四个标签的话，小羽这边也不做处理了。后续由老铁们自由发挥。

image-20200912215845678

2.2 全局挂载头部导航栏

在1.1中我们有提到留了一个meta的坑，老铁们还记得吗？忘了的话可以回头去看看本期的1.1小节哦。就是那个控制头部导航是否显示的那个，我们也是在src下的app.vue中，通过v-if判断noHeader属性进行判断。

保存后即可看到头部导航栏出现了，当我们切换不同的路由时，头部导航也是存在的哦（未设置noHeader或者noHeader为空）！！！

3.首页切图

首页主要是分成左右两边的，所以直接flex布局。

接着，左边是直播类型的选项，这里的话也是flex布局。

而右边的值播放列表，所以还是flex布局进行切图。

然后现在的话暂时不接入api接口和vuex，先使用假的数据来进行页面的渲染。ctrl+s保存后就可以看到首页的切图状况啦。

image-20200912221327907

4.直播界面切图

直播页主要也是使用flex布局进行切图，其实这里也可以使用浮动或者定位来切图，不过小羽比较喜欢使用flex布局，就看大家的喜好把~

image-20200912223640796

image-20200912223415792

room.vue

barrage.vue

修改一下全局的背景色

public下的index.html修改如下

小结

本期小羽主要给大家介绍了直播平台的前端页面的初步切图和路由的相关配置。然后关于直播平台的系列文，没有意外的话，小羽肯定会给老铁们更完，所以可以放心阅读。但是小羽平常也是需要工作的，众所周知程序猿的工作都是比较忙的，经常需要加班。小羽写这个教程都是在每天下班后，尽量抽出一部分时间来写的，所以就不要催更啦，大家都不容易呢~

觉得小羽教得还阔以得话就来波点赞和关注呗~

ps:纯原创，转载请标明出处