開篇
從今天起，小肆將和大家從頭開始做一個完整的實戰項目。其中遇到的每個知識點都是我們工作中常見的，這些知識點大多在網上都能找到但卻沒有哪個教程能都講得到，那就由小肆來做吧。
關注”技術放肆聊“,跟小肆一起行動起來！
在這個項目中，小肆力爭做到以下幾點:
- 應用目前最新的技術，並隨時間更新。
- 儘量多的增加知識點。
- 儘量詳細的講解每個知識點，以便小夥伴們可以靈活應用到別處。
- 儘量做最規範的代碼提交記錄，以便隨時可以在github上查詢變更。
- 完全使用實際工作中模式。
- 本項目後端接口採用成熟在線APP的測試服務器接口。
- 對哪個知識點沒有清楚理解，隨時可以來撩我。
涉及功能
- 初始化：腳手架構建、git倉庫配置、git提交規範配置、手機自適應配置。。。
- 用戶：登錄、註冊、找回密碼、第三方登錄、個人中心。。。
- 新聞：滾動導航、幻燈片、文章列表、文章詳情、圖片懶加載。。。
- 課程：音頻播放、視頻播放、自定義播放器、播放列表。。。
- 社區：發帖、評論、點贊、收藏。。。
- 支付：虛擬貨幣、微信支付、支付寶支付。。
- 直播：視頻流、禮物、彈幕。。。
功能包括以上功能又不僅限於以上功能，這個系列每篇文章都會把涉及到的功能點詳細介紹清楚，並會同步到本篇。
小肆的代碼並不一定是最優的解決方案，如果你有更好的方法，非常期望能與小肆聯繫，我會在文章中發出並標明出處
多說無益，行動起來吧！
項目初始化
本項目使用最新版本的vue-cli 3.3搭建。
安裝vue-cli3
sudo npm -g install @vue/cli
小肆用的mac，所以需要添加sudo獲取root權限來全局安裝，win用戶可以不加sudo。
安裝成功後輸入vue -V你會看到你安裝的版本號。
創建項目
vue creat mweb
輸入命令後選擇手動選擇功能（Manually select features)或會看到如下界面：
在這裏小肆全部選擇了，選擇TS是因爲TS是JS的超集，所以初始化的時候小肆選了TS，不過前期還是會用JS講解，以便未學習TS的夥伴們學習，後期會全部使用TS重構。
這裏的每個知識點之後項目實際使用我都會慢慢講解。
上圖是安裝過程我對每一項的選擇。
最後保存了配置項目就開始安裝依賴了。初始化成功後會顯示如下界面。
項目預覽
命令行輸入cd mweb進入項目目錄。
之後輸入啓動本地服務器npm run serve
成功後能看到如下界面。
另外vue-cli3提供了圖形化配置界面。
命令行輸入vue ui即可啓動。
github配置
項目初始化後已經有git的初始化配置了，這時候我們只需要把項目和github的遠程倉庫做連接就可以了。
我們首先在github上新建項目，得到項目地址後命令行輸入以下命令：git remote add origin [email protected]:Feleti/mweb.git
因爲我配置了ssh key所以地址以git開頭，如果未配置的使用https開到的地址。
git的使用之後我會單獨出一篇文章講解，這裏就不詳述了。
上傳代碼到遠程分支：git push --set-upstream origin master
首次上傳新分支輸入以上命令，不是的話只要輸入git push就可以了。
上傳成功後可以在github上看到了。
小結
今天的內容有點少，本來計劃把項目前期配置的內容都放在這篇，可無奈啊，小肆今天回家晚啦，又有點別的事耽誤了，現在快12點了，小肆再不發文今天就發不了了，那就之後再講吧，記得關注小肆公衆號”技術放肆聊“，跟進本課程，會讓你學到你想學的。
