vue 前端显示图片加token_vue+node.js手把手教你搭建一个直播平台（二）

上一期，帅气的小羽给老铁们介绍了直播平台的项目的后端搭建，这期就让小羽带大家来搭建一下前端的框架。

1.创建前端工程

毫无疑问，搭建一个项目的框架，那第一步肯定是得创建一个工程啦。cmd命令，输入vue create mylive ，然后一直回车就好了。然后等待一小会，我们的初始化工程就创建完成啦。

接着我们使用编辑器打开我们刚刚创建好的项目。不用我提醒了吧，vs code天下无敌。这就是我们刚刚创建的工程啦。下图是我们的项目目录。

然后我们可以在cmd中输入npm run serve，然后通过提示就可以打开相关的网站，看到我们初始化的配置啦。

2.初始化工程

小伙伴们看到上面的那个界面了嘛？是不是跟我们的最终目标完全不一致，让我们来一场棒子的整容手术，将它慢慢的整成我们最终想要看到的样子。

2.1 初始化相关插件模块

替换package.json文件中的内容，这里的话我们是把所有的插件模块都安装了，后面就不用一个个的安装啦，方便快捷，值得信赖！接着就是cmd中输入cnpm install安装插件啦。

2.2 初始化ui框架

人靠衣装，人靠马鞍。既让咱们的老铁们都这么帅啦，总不能让自己写的程序变丑了，那样就烘托不了咱们高贵的气质了。所以，我们采用了业界中比较高大上的iview。在main.js 中加入以下几行（在new Vue()之前）。

//引入iview

既然都引入了这么好看的ui组件，怎能不进行一番测试呢？在app.vue中添加button组件。然后打开网页就可以看到效果啦~

2.3 初始化axios

在src/assets/js中创建http.js，然后初始化axios。

/*

2.4 替换网页的相关文件

2.4.1 替换favicon.ico

把public下的favicon.ico文件替换成自己喜欢的图片。偷偷告诉你们，这个其实只需要把你喜欢的图片换成这个名字后再丢进来就阔以啦，你们可不准告诉别人哦~然后重启vue，就可以看到我们的图标变啦，发现没变化的小伙伴们可以ctrl+f5（清缓存刷新）。

2.4.2 修改tab标题

public下的index.html，修改title标签中的内容为小羽直播。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>小羽直播</title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

最终结果如下

2.5 引入相关的js文件

2.5.1 引入bus线程

什么是bus线程？用个人对bus线程的理解来说，bus线程是发布订阅模式的一种实现。由于目前老铁们在搭建自己的直播间嘛，所以小羽就用直播间来举个栗子，解析一下什么是发布订阅模式。比如说老铁喜欢玩快乐风男，然后看到有一个快乐风男玩的贼帅的主播（比如小羽，疯狂暗示），然后一天不看就睡不着觉的那种。但是这个主播有个习惯，就是不喜欢定时直播。那现在广大观众老爷们总不能一天到晚守在直播间吧？那怎么办呢？这里就涉及到了发布订阅模式。假如路人甲和路人乙都订阅了这个主播A，而路人甲和路人丙又订阅了另外一个主播B。此时就会有以下两种情况：

1.当主播A上线的时候，就会自动发送一条消息给路人甲和路人乙，而路人丙则不会收到任何信息。
2.当主播B上线的时候，就会自动发送一条消息给路人甲和路人乙，而路人丙则不会收到任何信息。

以上则是个人对发布订阅模式和bus线程的一些见解。

在src/assets/js下新增bus.js

import

2.5.2 引入common.js

common.js是小羽封装的一些常用的方法。在src/assets/js下新增common.js

/*

在main.js中，将common.js注入到vue原型中。

2.5.3 引入config.js

config.js是一个配置文件主要用来配置生产环境和开发环境中的不用url

/*

在main.js中将config.js注入到vue原型中。

3.配置vue.config.js

在根目录下新建vue.config.js。用过vuecli3的老哥们应该都知道，这个文件是vuecli的默认文件，主要是用来配置与webpack相关的内容。

/*

4.配置.gitinore

该文件是配置git相关的，主要提醒git，哪些文件需要上传到git仓库，那些文件不需要。非必须项，如果不使用git的老铁可以忽略哦~

.DS_Store
node_modules
/dist# local env files
.env.local
.env.*.local# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

小结

本期主要介绍了如何搭建一个前端工程，并对该工程进行一些初始化的配置。本来是想直接开始撸界面的，但后面又想了一下，其实应该按照正常的开发逻辑来讲比较好。也就是先搭框架再撸代码（一个好用的框架真的能让开发的过程变得事半功倍），所以界面的就往后推了。

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

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