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