vue github
介紹：最近在學(xué)習(xí)使用
vue-cli、webpack快速構(gòu)建項(xiàng)目及如何將自己寫好的項(xiàng)目放到github上面去,并且給訪客提供快速入口demo幽勒。
自己寫了個網(wǎng)易的demo级零，效果圖如下：
demo效果圖
demo效果圖
demo效果圖
當(dāng)我們在github上面訪問別人的項(xiàng)目時(shí),往往會看到一些demo入口,點(diǎn)擊它,就會快速的看到項(xiàng)目效果纪岁。而不是需要先去將項(xiàng)目clone到本地躲叼，再去安裝一些依賴,最終在本地起個服務(wù)查看效果蔬捷。如下:
github項(xiàng)目demo快速入口
那么這個是如何實(shí)現(xiàn)的厉亏？話不多說董习，跟著我敲即可。
如果你還不清楚什么是vue-cli爱只、webpack及如何使用他們的話,建議你先去看下我的這篇文章:
http://www.reibang.com/writer#/notebooks/12696453/notes/13528563
第一步：git安裝
這個就不多說了皿淋，不會的自行百度。
第二步：創(chuàng)建本地倉庫（存放本地項(xiàng)目的文件夾）
創(chuàng)建本地倉庫
這里我通過命令行,在桌面創(chuàng)建了個myCangku的文件夾,用于存放本地項(xiàng)目恬试。
第三步：進(jìn)入該文件夾,執(zhí)行g(shù)it init命令
進(jìn)入本地倉庫窝趣、執(zhí)行g(shù)it init
git init: 通過命令git init把這個文件夾變成Git可管理的倉庫。這時(shí)你會發(fā)現(xiàn)myCangku里面多了個.git文件夾训柴，它是Git用來跟蹤和管理版本庫的哑舒。如果你看不到，是因?yàn)樗J(rèn)是隱藏文件幻馁，那你就需要設(shè)置一下讓隱藏文件可見洗鸵。
第四步：把我們寫好的vue項(xiàng)目復(fù)制粘貼到該目錄下面
將寫好的項(xiàng)目復(fù)制粘貼進(jìn)本地倉庫
這里我把自己用vue寫的項(xiàng)目框架-網(wǎng)易嚴(yán)選復(fù)制粘貼進(jìn)myCangku本地倉庫
第五步：git status
查看本地倉庫狀態(tài)
git status:查看當(dāng)前倉庫狀態(tài),紅色文件表示待add文件
第六步：git add .
添加文件到本地倉庫
這里提示你雖然把項(xiàng)目粘貼過來了，但還沒有add到Git倉庫上仗嗦，然后我們通過git add .把剛才復(fù)制過來的項(xiàng)目全部添加到倉庫上膘滨。git add后面的點(diǎn)表示把該文件夾的所有東西全部add到本地倉庫里。這時(shí)我們可以再次通過git status查看本地倉庫狀態(tài)
第七步：git commit -m "first commit"
提交到本地倉庫
把剛才add到本地倉庫的文件,提交到本地倉庫稀拐。-m后面引號里面是本次提交的注釋內(nèi)容火邓，這個可以不寫，但最好寫上，不然會報(bào)錯铲咨。 好了躲胳，我們本地Git倉庫這邊的工作做完了，下面就到了連接遠(yuǎn)程倉庫（也就是連接Github）
第八步：將本地倉庫和github倉庫關(guān)聯(lián)
大多數(shù) Git 服務(wù)器都會選擇使用 SSH 公鑰來進(jìn)行授權(quán)纤勒。系統(tǒng)中的每個用戶都必須提供一個公鑰用于授權(quán)泛鸟，沒有的話就要生成一個。生成公鑰的過程在所有操作系統(tǒng)上都差不多踊东。首先你要確認(rèn)一下本機(jī)是否已經(jīng)有一個公鑰北滥。
我們可以先在命令行執(zhí)行 cd ~ （退回home目錄）
再執(zhí)行 cd .ssh
查看本機(jī)是否存在公鑰
看一下有沒有id_rsa和id_rsa.pub，有 .pub 后綴的文件就是公鑰闸翅，另一個文件則是密鑰再芋。
如果沒有的話需要創(chuàng)建該文件--自行百度
這里我本地已經(jīng)有了這兩個文件,執(zhí)行 vim id_rsa.pub,里面的一長串代碼就是你的本機(jī)公鑰,復(fù)制下來
復(fù)制該公鑰
第九步：登陸github
SSH公鑰授權(quán)
登錄Github,找到右上角的圖標(biāo)，打開點(diǎn)進(jìn)里面的Settings坚冀，再選中里面的SSH and GPG KEYS济赎，點(diǎn)擊右上角的New SSH key，然后Title里面隨便填记某，再把剛才id_rsa.pub里面的內(nèi)容復(fù)制到Title下面的Key內(nèi)容框里面司训，最后點(diǎn)擊Add SSH key，這樣就完成了SSH Key的加密液南。
第十步：創(chuàng)建github倉庫
創(chuàng)建github倉庫
這里我創(chuàng)建了個名字為my_github_cangku的倉庫壳猜，并且選擇為該倉庫添加README.md文件。
第十一步：將本地倉庫和github倉庫關(guān)聯(lián)起來
進(jìn)步剛才創(chuàng)建的本地倉庫myCangku
執(zhí)行以下命令
git remote add origin https://github.com/weirui88888/my_github_cangku
這里的網(wǎng)址就是倉庫的網(wǎng)址
本地倉庫和github倉庫關(guān)聯(lián)
這個時(shí)候,本地倉庫myCangku和github倉庫my_github_cangku就已經(jīng)實(shí)現(xiàn)關(guān)聯(lián)了
第十二步：向github倉庫推送本地倉庫中所有內(nèi)容
注意首次提交需要執(zhí)行以下命令
git push -u origin master
由于新建的遠(yuǎn)程倉庫是空的滑凉，所以要加上-u這個參數(shù)统扳，等遠(yuǎn)程倉庫里面有了內(nèi)容之后，下次再從本地庫上傳內(nèi)容的時(shí)候只需下面這樣就可以了：
git push origin master
這里有個坑需要注意一下畅姊，就是在上面第十步創(chuàng)建遠(yuǎn)程倉庫的時(shí)候咒钟，如果你勾選了Initialize this repository with a README（就是創(chuàng)建倉庫的時(shí)候自動給你創(chuàng)建一個README文件），那么到了第九步你將本地倉庫內(nèi)容推送到遠(yuǎn)程倉庫的時(shí)候就會報(bào)一個failed to push some refs to https://github.com/guyibang/TEST2.git的錯若未。
可能出現(xiàn)異常
這是由于你新創(chuàng)建的那個倉庫里面的README文件不在本地倉庫目錄中朱嘴，這時(shí)我們可以通過以下命令先將內(nèi)容合并一下：
git pull --rebase origin master
處理異常
這個時(shí)候在向github倉庫push時(shí)就不會報(bào)錯了,成功push后會是這樣
這時(shí)候你再重新刷新你的Github頁面進(jìn)入剛才新建的那個倉庫里面就會發(fā)現(xiàn)項(xiàng)目已經(jīng)成功上傳了：
上傳成功
至此，我們已經(jīng)實(shí)現(xiàn)了一半,即將本地倉庫推送至github倉庫粗合。先放鞭炮慶祝一番萍嬉。
接下來我們要在剛才創(chuàng)建的github倉庫中提供上傳項(xiàng)目的demo入口。
我們先進(jìn)入之前創(chuàng)建的myCangku本地倉庫,里面有我寫的項(xiàng)目:網(wǎng)易嚴(yán)選,目錄結(jié)構(gòu)如下：
網(wǎng)易嚴(yán)選項(xiàng)目結(jié)構(gòu)
進(jìn)入網(wǎng)易嚴(yán)選項(xiàng)目:cd 網(wǎng)易嚴(yán)選
我們在命令行執(zhí)行:cnpm run build
執(zhí)行完畢以后,會生成一個dist目錄,里面有一個index.html文件和static目錄（用于存放css舌劳、js帚湘、img）
dist目錄結(jié)構(gòu)
這個時(shí)候玫荣，我們打開dist目錄下面的index.html,在控制臺會發(fā)現(xiàn)一系列關(guān)于路徑文件找不到而報(bào)錯甚淡。這是因?yàn)槲覀冊赽uild之前沒有將config目錄下面的index.js中的assetsPublicPath由默認(rèn)的'/'改成'./'
絕對路徑改成相對路徑
改好之后,我們再次npm run build
成功之后，再次打開dist中的index.html就可以看見自己最終的成果了。但是我們要把它放到github上面去贯卦，讓別人快速瀏覽资柔。
接著我們執(zhí)行命令cd 網(wǎng)易嚴(yán)選
要把本次生成的dist文件,通過以下的命令行,將dist目錄上傳至github的my_github_cangku中
git add -f "dist" //這里的-f如果不加的話,可能會報(bào)錯,-f應(yīng)該是強(qiáng)制添加文件的意思
git commit -m "注釋"
git push origin master
這個時(shí)候github倉庫my_github_cangku的目錄結(jié)構(gòu)如下
倉庫目錄結(jié)構(gòu)
點(diǎn)擊該倉庫上面的setting,找到github pages模塊，將source由none改成master branch撵割。這時(shí)會生成一個網(wǎng)址,這個網(wǎng)址就是該github倉庫的訪問網(wǎng)址,我們在后面拼接上剛才dist中的index.html路徑即可
點(diǎn)擊倉庫setting
source由none設(shè)置成master branch
點(diǎn)擊save生成網(wǎng)址
如：https://weirui88888.github.io/my_github_cangku/網(wǎng)易嚴(yán)選/dist/index.html
我們將該網(wǎng)址放到README.md中,我們即可實(shí)現(xiàn)demo快速瀏覽贿堰。
README.md文件中放入demo地址
好了，至此啡彬，我們就已經(jīng)實(shí)現(xiàn)了github上面快速入口demo羹与。以后自己寫的一些demo就可以放到github上面，以后出去面試的時(shí)候庶灿，就可以裝逼于無形之中了纵搁。
如果對你有幫助，記得動動你們的?? 往踢，給個 ??腾誉！
夜已深，就寢峻呕。
總結(jié)：其實(shí)只需要進(jìn)行下面幾步就能把本地項(xiàng)目上傳到Github
1利职、在本地創(chuàng)建一個版本庫（即文件夾），通過git init把它變成Git倉庫瘦癌；
2猪贪、把項(xiàng)目復(fù)制到這個文件夾里面，再通過git add .把項(xiàng)目添加到倉庫讯私；
3哮伟、再通過git commit -m "注釋內(nèi)容"把項(xiàng)目提交到倉庫；
4妄帘、在Github上設(shè)置好SSH密鑰后楞黄，新建一個遠(yuǎn)程倉庫，通過git remote add origin https://github.com/guyibang/TEST2.git將本地倉庫和遠(yuǎn)程倉庫進(jìn)行關(guān)聯(lián)抡驼；
5鬼廓、最后通過git push -u origin master把本地倉庫的項(xiàng)目推送到遠(yuǎn)程倉庫（也就是Github）上；（若新建遠(yuǎn)程倉庫的時(shí)候自動創(chuàng)建了README文件會報(bào)錯致盟，解決辦法看上面）碎税。
https://weirui88888.github.io/my_github_cangku/網(wǎng)易嚴(yán)選/dist/index.html
點(diǎn)擊上面鏈接即可查看網(wǎng)易嚴(yán)選demo
??個人github博客已經(jīng)開通，期待您的寶貴建議和star??
github博客地址傳送門
