新手福音！用vue-cli3從0到1作一個完整功能手機站（一）

開篇

從今天起，小肆將和你們從頭開始作一個完整的實戰項目。其中遇到的每一個知識點都是咱們工做中常見的，這些知識點大多在網上都能找到但卻沒有哪一個教程能都講獲得，那就由小肆來作吧。

關注」技術放肆聊「,跟小肆一塊兒行動起來！

在這個項目中，小肆力爭作到如下幾點:

• 應用目前最新的技術，並隨時間更新。
• 儘可能多的增長知識點。
• 儘可能詳細的講解每一個知識點，以便小夥伴們能夠靈活應用到別處。
• 儘可能作最規範的代碼提交記錄，以便隨時能夠在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 git@github.com:Feleti/mweb.git
由於我配置了ssh key因此地址以git開頭，若是未配置的使用https開到的地址。

git的使用以後我會單獨出一篇文章講解，這裏就不詳述了。

上傳代碼到遠程分支：
git push --set-upstream origin master
首次上傳新分支輸入以上命令，不是的話只要輸入git push就能夠了。

上傳成功後能夠在github上看到了。

小結

今天的內容有點少，原本計劃把項目前期配置的內容都放在這篇，可無奈啊，小肆今天回家晚啦，又有點別的事耽誤了，如今快12點了，小肆再不發文今天就發不了了，那就以後再講吧，記得關注小肆公衆號」技術放肆聊「，跟進本課程，會讓你學到你想學的。

本系列文章目錄：

1. 用vue-cli3從0到1作一個完整功能手機站（一）
2. 從0到1開發實戰手機站（二）：Git提交規範配置
3. 從0到1使用VUE-CLI3開發實戰（三）: ES6知識儲備