vue github
介紹：最近在學習使用
vue-cli、webpack快速構建項目及如何將自己寫好的項目放到github上面去,并且給訪客提供快速入口demo。
自己寫了個網易的demo，效果圖如下：
demo效果圖
demo效果圖
demo效果圖
當我們在github上面訪問別人的項目時,往往會看到一些demo入口,點擊它,就會快速的看到項目效果。而不是需要先去將項目clone到本地，再去安裝一些依賴,最終在本地起個服務查看效果。如下:
github項目demo快速入口
那么這個是如何實現的？話不多說，跟著我敲即可。
如果你還不清楚什么是vue-cli、webpack及如何使用他們的話,建議你先去看下我的這篇文章:
http://www.lxweimin.com/writer#/notebooks/12696453/notes/13528563
第一步：git安裝
這個就不多說了，不會的自行百度。
第二步：創建本地倉庫（存放本地項目的文件夾）
創建本地倉庫
這里我通過命令行,在桌面創建了個myCangku的文件夾,用于存放本地項目。
第三步：進入該文件夾,執行git init命令
進入本地倉庫、執行git init
git init: 通過命令git init把這個文件夾變成Git可管理的倉庫。這時你會發現myCangku里面多了個.git文件夾，它是Git用來跟蹤和管理版本庫的。如果你看不到，是因為它默認是隱藏文件，那你就需要設置一下讓隱藏文件可見。
第四步：把我們寫好的vue項目復制粘貼到該目錄下面
將寫好的項目復制粘貼進本地倉庫
這里我把自己用vue寫的項目框架-網易嚴選復制粘貼進myCangku本地倉庫
第五步：git status
查看本地倉庫狀態
git status:查看當前倉庫狀態,紅色文件表示待add文件
第六步：git add .
添加文件到本地倉庫
這里提示你雖然把項目粘貼過來了，但還沒有add到Git倉庫上，然后我們通過git add .把剛才復制過來的項目全部添加到倉庫上。git add后面的點表示把該文件夾的所有東西全部add到本地倉庫里。這時我們可以再次通過git status查看本地倉庫狀態
第七步：git commit -m "first commit"
提交到本地倉庫
把剛才add到本地倉庫的文件,提交到本地倉庫。-m后面引號里面是本次提交的注釋內容，這個可以不寫，但最好寫上，不然會報錯。 好了，我們本地Git倉庫這邊的工作做完了，下面就到了連接遠程倉庫（也就是連接Github）
第八步：將本地倉庫和github倉庫關聯
大多數 Git 服務器都會選擇使用 SSH 公鑰來進行授權。系統中的每個用戶都必須提供一個公鑰用于授權，沒有的話就要生成一個。生成公鑰的過程在所有操作系統上都差不多。首先你要確認一下本機是否已經有一個公鑰。
我們可以先在命令行執行 cd ~ （退回home目錄）
再執行 cd .ssh
查看本機是否存在公鑰
看一下有沒有id_rsa和id_rsa.pub，有 .pub 后綴的文件就是公鑰，另一個文件則是密鑰。
如果沒有的話需要創建該文件--自行百度
這里我本地已經有了這兩個文件,執行 vim id_rsa.pub,里面的一長串代碼就是你的本機公鑰,復制下來
復制該公鑰
第九步：登陸github
SSH公鑰授權
登錄Github,找到右上角的圖標，打開點進里面的Settings，再選中里面的SSH and GPG KEYS，點擊右上角的New SSH key，然后Title里面隨便填，再把剛才id_rsa.pub里面的內容復制到Title下面的Key內容框里面，最后點擊Add SSH key，這樣就完成了SSH Key的加密。
第十步：創建github倉庫
創建github倉庫
這里我創建了個名字為my_github_cangku的倉庫，并且選擇為該倉庫添加README.md文件。
第十一步：將本地倉庫和github倉庫關聯起來
進步剛才創建的本地倉庫myCangku
執行以下命令
git remote add origin https://github.com/weirui88888/my_github_cangku
這里的網址就是倉庫的網址
本地倉庫和github倉庫關聯
這個時候,本地倉庫myCangku和github倉庫my_github_cangku就已經實現關聯了
第十二步：向github倉庫推送本地倉庫中所有內容
注意首次提交需要執行以下命令
git push -u origin master
由于新建的遠程倉庫是空的，所以要加上-u這個參數，等遠程倉庫里面有了內容之后，下次再從本地庫上傳內容的時候只需下面這樣就可以了：
git push origin master
這里有個坑需要注意一下，就是在上面第十步創建遠程倉庫的時候，如果你勾選了Initialize this repository with a README（就是創建倉庫的時候自動給你創建一個README文件），那么到了第九步你將本地倉庫內容推送到遠程倉庫的時候就會報一個failed to push some refs to https://github.com/guyibang/TEST2.git的錯。
可能出現異常
這是由于你新創建的那個倉庫里面的README文件不在本地倉庫目錄中，這時我們可以通過以下命令先將內容合并一下：
git pull --rebase origin master
處理異常
這個時候在向github倉庫push時就不會報錯了,成功push后會是這樣
這時候你再重新刷新你的Github頁面進入剛才新建的那個倉庫里面就會發現項目已經成功上傳了：
上傳成功
至此，我們已經實現了一半,即將本地倉庫推送至github倉庫。先放鞭炮慶祝一番。
接下來我們要在剛才創建的github倉庫中提供上傳項目的demo入口。
我們先進入之前創建的myCangku本地倉庫,里面有我寫的項目:網易嚴選,目錄結構如下：
網易嚴選項目結構
進入網易嚴選項目:cd 網易嚴選
我們在命令行執行:cnpm run build
執行完畢以后,會生成一個dist目錄,里面有一個index.html文件和static目錄（用于存放css、js、img）
dist目錄結構
這個時候，我們打開dist目錄下面的index.html,在控制臺會發現一系列關于路徑文件找不到而報錯。這是因為我們在build之前沒有將config目錄下面的index.js中的assetsPublicPath由默認的'/'改成'./'
絕對路徑改成相對路徑
改好之后,我們再次npm run build
成功之后，再次打開dist中的index.html就可以看見自己最終的成果了。但是我們要把它放到github上面去，讓別人快速瀏覽。
接著我們執行命令cd 網易嚴選
要把本次生成的dist文件,通過以下的命令行,將dist目錄上傳至github的my_github_cangku中
git add -f "dist" //這里的-f如果不加的話,可能會報錯,-f應該是強制添加文件的意思
git commit -m "注釋"
git push origin master
這個時候github倉庫my_github_cangku的目錄結構如下
倉庫目錄結構
點擊該倉庫上面的setting,找到github pages模塊，將source由none改成master branch。這時會生成一個網址,這個網址就是該github倉庫的訪問網址,我們在后面拼接上剛才dist中的index.html路徑即可
點擊倉庫setting
source由none設置成master branch
點擊save生成網址
如：https://weirui88888.github.io/my_github_cangku/網易嚴選/dist/index.html
我們將該網址放到README.md中,我們即可實現demo快速瀏覽。
README.md文件中放入demo地址
好了，至此，我們就已經實現了github上面快速入口demo。以后自己寫的一些demo就可以放到github上面，以后出去面試的時候，就可以裝逼于無形之中了。
如果對你有幫助，記得動動你們的?? ，給個 ??！
夜已深，就寢。
總結：其實只需要進行下面幾步就能把本地項目上傳到Github
1、在本地創建一個版本庫（即文件夾），通過git init把它變成Git倉庫；
2、把項目復制到這個文件夾里面，再通過git add .把項目添加到倉庫；
3、再通過git commit -m "注釋內容"把項目提交到倉庫；
4、在Github上設置好SSH密鑰后，新建一個遠程倉庫，通過git remote add origin https://github.com/guyibang/TEST2.git將本地倉庫和遠程倉庫進行關聯；
5、最后通過git push -u origin master把本地倉庫的項目推送到遠程倉庫（也就是Github）上；（若新建遠程倉庫的時候自動創建了README文件會報錯，解決辦法看上面）。
https://weirui88888.github.io/my_github_cangku/網易嚴選/dist/index.html
點擊上面鏈接即可查看網易嚴選demo
??個人github博客已經開通，期待您的寶貴建議和star??
github博客地址傳送門
