上一期，帅气的小羽给老铁们介绍了直播平台的项目的后端搭建，这期就让小羽带大家来搭建一下前端的框架。
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:纯原创，转载请标明出处
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
