資訊專欄INFORMATION COLUMN
摘要：開篇從今天起，小肆將和大家從頭開始做一個完整的實戰(zhàn)項目。關(guān)注技術(shù)放肆聊跟小肆一起行動起來在這個項目中，小肆力爭做到以下幾點應(yīng)用目前最新的技術(shù)，并隨時間更新。
開篇
從今天起，小肆將和大家從頭開始做一個完整的實戰(zhàn)項目。其中遇到的每個知識點都是我們工作中常見的，這些知識點大多在網(wǎng)上都能找到但卻沒有哪個教程能都講得到，那就由小肆來做吧。
關(guān)注”技術(shù)放肆聊“,跟小肆一起行動起來！
在這個項目中，小肆力爭做到以下幾點:應(yīng)用目前最新的技術(shù)，并隨時間更新。
盡量多的增加知識點。
盡量詳細的講解每個知識點，以便小伙伴們可以靈活應(yīng)用到別處。
盡量做最規(guī)范的代碼提交記錄，以便隨時可以在github上查詢變更。
完全使用實際工作中模式。
本項目后端接口采用成熟在線APP的測試服務(wù)器接口。
對哪個知識點沒有清楚理解，隨時可以來撩我。
涉及功能初始化：腳手架構(gòu)建、git倉庫配置、git提交規(guī)范配置、手機自適應(yīng)配置。。。
用戶：登錄、注冊、找回密碼、第三方登錄、個人中心。。。
新聞：滾動導航、幻燈片、文章列表、文章詳情、圖片懶加載。。。
課程：音頻播放、視頻播放、自定義播放器、播放列表。。。
社區(qū)：發(fā)帖、評論、點贊、收藏。。。
支付：虛擬貨幣、微信支付、支付寶支付。。
直播：視頻流、禮物、彈幕。。。
功能包括以上功能又不僅限于以上功能，這個系列每篇文章都會把涉及到的功能點詳細介紹清楚，并會同步到本篇。
小肆的代碼并不一定是最優(yōu)的解決方案，如果你有更好的方法，非常期望能與小肆聯(lián)系，我會在文章中發(fā)出并標明出處
多說無益，行動起來吧！
項目初始化本項目使用最新版本的vue-cli 3.3搭建。
安裝vue-cli3sudo npm -g install @vue/cli
小肆用的mac，所以需要添加sudo獲取root權(quán)限來全局安裝，win用戶可以不加sudo。
安裝成功后輸入vue -V你會看到你安裝的版本號。
創(chuàng)建項目vue creat mweb
輸入命令后選擇手動選擇功能（Manually select features)或會看到如下界面：
在這里小肆全部選擇了，選擇TS是因為TS是JS的超集，所以初始化的時候小肆選了TS，不過前期還是會用JS講解，以便未學習TS的伙伴們學習，后期會全部使用TS重構(gòu)。
這里的每個知識點之后項目實際使用我都會慢慢講解。
上圖是安裝過程我對每一項的選擇。
最后保存了配置項目就開始安裝依賴了。初始化成功后會顯示如下界面。
項目預覽命令行輸入cd mweb進入項目目錄。
之后輸入啟動本地服務(wù)器npm run serve
成功后能看到如下界面。
另外vue-cli3提供了圖形化配置界面。
命令行輸入vue ui即可啟動。
項目初始化后已經(jīng)有g(shù)it的初始化配置了，這時候我們只需要把項目和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上看到了。
今天的內(nèi)容有點少，本來計劃把項目前期配置的內(nèi)容都放在這篇，可無奈啊，小肆今天回家晚啦，又有點別的事耽誤了，現(xiàn)在快12點了，小肆再不發(fā)文今天就發(fā)不了了，那就之后再講吧，記得關(guān)注小肆公眾號”技術(shù)放肆聊“，跟進本課程，會讓你學到你想學的。
本系列文章目錄：用vue-cli3從0到1做一個完整功能手機站（一）
從0到1開發(fā)實戰(zhàn)手機站（二）：Git提交規(guī)范配置
從0到1使用VUE-CLI3開發(fā)實戰(zhàn)（三）: ES6知識儲備
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/101031.html
摘要：既然是實戰(zhàn)項目，我們也得在寫頁面之前把相關(guān)的規(guī)范配置做好。使用來執(zhí)行規(guī)范全局安裝下需在前面加項目目錄下執(zhí)行配好后，之后用到命令時，改為使用。使用效驗提交信息首先還是安裝依賴也會安裝但自且并不和之后的版本兼容。 生活不能隨意過，代碼也不能隨意寫。 前一篇文章我們已經(jīng)把項目搭建好了，那是不是馬上就開始寫頁面了呀？ NO！ 無論在哪家公司，都會有相應(yīng)的代碼規(guī)范。新入職的員工往往第一步就要接受...
摘要：既然是實戰(zhàn)項目，我們也得在寫頁面之前把相關(guān)的規(guī)范配置做好。使用來執(zhí)行規(guī)范全局安裝下需在前面加項目目錄下執(zhí)行配好后，之后用到命令時，改為使用。使用效驗提交信息首先還是安裝依賴也會安裝但自且并不和之后的版本兼容。 生活不能隨意過，代碼也不能隨意寫。 前一篇文章我們已經(jīng)把項目搭建好了，那是不是馬上就開始寫頁面了呀？ NO！ 無論在哪家公司，都會有相應(yīng)的代碼規(guī)范。新入職的員工往往第一步就要接受...
摘要：小肆前幾天發(fā)了一篇年精品開源項目庫的匯總，今天小肆要使用的是在組件中排行第三的。記得點好看呦前置閱讀用從到做一個完整功能手機站一從到開發(fā)實戰(zhàn)手機站二提交規(guī)范配置從到使用開發(fā)實戰(zhàn)三知識儲備從到使用開發(fā)實戰(zhàn)四封裝 小肆前幾天發(fā)了一篇2019年Vue精品開源項目庫的匯總，今天小肆要使用的是在UI組件中排行第三的Vuetify。 vuetify介紹 Vuetify是一個漸進式的框架，完全根據(jù)M...
閱讀 1917·2021-11-25 09:43
閱讀 1421·2021-11-22 15:08
閱讀 3872·2021-11-22 09:34
閱讀 3294·2021-09-04 16:40
閱讀 3413·2021-09-04 16:40
閱讀 607·2019-08-30 15:54
閱讀 1398·2019-08-29 17:19
閱讀 1820·2019-08-28 18:13
