前言
在前端，我猜小伙伴們做的第一個項(xiàng)目大多數(shù)都是跟購物商城/論壇相關(guān)的吧。帥氣的小羽也不例外，大學(xué)期間的第一個項(xiàng)目也是商城，嗯，我們都一樣。是不是有一種很膩的感覺，完全沒有新意？那現(xiàn)在就讓帥氣的小羽帶你走出這種感覺，手把手教你搭建一個直播平臺！??！
準(zhǔn)備工作
1.基礎(chǔ)相關(guān)
以下條款默認(rèn)聰明的你是已經(jīng)掌握的啦?。?！
（1）html5
（2）css3
（3）javascript
（4）mysql數(shù)據(jù)庫以及基礎(chǔ)的增刪改查語法
（5）vue.js基礎(chǔ)
（6）node.js（這個不是必須，當(dāng)然會就更妙啦~）
2.環(huán)境相關(guān)
2.1 編輯器
嗯，俗話說的好，磨刀不誤砍柴工，一個好的編輯器，對于開發(fā)者來說簡直就是效率加速器呀。在前端開發(fā)這方面的話，帥氣的小羽給聰明的小伙伴們推薦兩款，webstorm和vs code。目前小羽歐巴是vs code的死終粉，什么？你說webstrom好用？我不聽，我不聽！??！
2.2 node.js環(huán)境
嗯，這個應(yīng)該很簡單的吧？直接在node.js官網(wǎng)上下載，然后點(diǎn)點(diǎn)點(diǎn)安裝就ok拉，我想應(yīng)該難不倒聰明的小伙伴們吧？安裝完后。敲黑版，敲黑版，敲黑版。win鍵+r鍵輸入cmd然后回車，打開cmd（命令提示符），以后就簡稱打開cmd命令咯！
打開cmd命令后，分別輸入node -v和npm -v，如果出現(xiàn)類似以下的提示就說明我們的node.js已經(jīng)安裝成功啦。
因?yàn)槟撤N不可告人的原因，npm源的下載速度很慢的，所以我們可以通過以下兩種方法解決。都是在cmd命令上直接輸入就闊以啦~
1.npm設(shè)置淘寶源
npm config set registry https://registry.npm.taobao.org
2.全局安裝cnpm
npm install cnpm -g
2.3 安裝vue-cli3
vue-cli3？這是個啥子?xùn)|西喲？老鐵們，別急，這可是一個好東西喲。用了這個東西你就可以迎娶白富美，走向人生。。?？瓤龋呦蛐蕩p峰。vue-cli是一個專門為vue開發(fā)者（比如小羽歐巴），制作的一個提升效率的工具。cmd命令行輸入。
npm install -g @vue/cli
當(dāng)我們輸入vue -V(大寫的V，大寫的)，cmd命令行中如下圖所示，就說明了我們的vue-cli3安裝成功啦~
2.4 mysql數(shù)據(jù)庫
嗯，這個咱就不多說了，網(wǎng)上的教程一堆堆的，實(shí)在不行就直接下在一個wamp/xmapp（騷年，我覺得你天賦異稟，來跟我學(xué)php吧）。親們，小羽這邊就偷個懶，直接使用docker來安裝mysql啦。不得不說，docker這東西真香。想通過docker來安裝mysql的小伙伴們可以點(diǎn)擊傳送們(一刀999，免費(fèi)贈送navicat可視化管理工具哦~)
2.5 直播推流工具
是不是有小伙伴們在好奇主播們是怎么進(jìn)行直播和錄播的？沒錯，就是它，大名鼎鼎的obs，直接下載安裝就闊以啦~
3.最終效果
先上dj，先上dj，咳咳，圖。。。不然你們這群好色的家伙是不會上當(dāng)?shù)摹竟奉^保命】！
將會實(shí)現(xiàn)的功能
（1）注冊功能
（2）登錄功能
（3）退出登錄功能
（4）直播功能
（5）實(shí)時彈幕功能
（6）直播間搜索功能
好了，相關(guān)的介紹和準(zhǔn)備工作已完成，下章就要開擼啦，覺得小羽教得還闊以得話就點(diǎn)波關(guān)注唄~
ps:純原創(chuàng)，轉(zhuǎn)載請標(biāo)明出處
