天天看點

VS Code連接配接Gitlab,輕松開發web前端應用

假設你已經有了自己的gitlab伺服器以及已經安裝好了git for windows。

現在講講windows環境下如何把vs code上寫的項目托管到gitlab伺服器中。

第一步,在gitlab中建立項目,這個跟github一樣的,new project 一個就可以了,如圖1,2,3。

圖1

VS Code連接配接Gitlab,輕松開發web前端應用

圖2

VS Code連接配接Gitlab,輕松開發web前端應用
VS Code連接配接Gitlab,輕松開發web前端應用

圖3(記好http模式下的那個位址)

VS Code連接配接Gitlab,輕松開發web前端應用
VS Code連接配接Gitlab,輕松開發web前端應用

第二步,建立一個項目檔案夾,如D:\workspace\testproject,然後右擊這個檔案夾,選擇git bush here按鈕,然後碼下面的代碼

git remote add origin http://ubuntu/root/testproject.git
           

注意了這地方的網址别照抄! 這個要寫剛才在圖3中的位址,如果出現 not a git repository ( or ... 的話,先

git init
           

然後輸入上面的指令。

第三步,在vs code中打開我們的D:\workspace\testproject目錄,然後随便建立一個檔案填幾個字,這時候左側菜單的git圖示會出現藍色的點,如圖4

圖4

VS Code連接配接Gitlab,輕松開發web前端應用
VS Code連接配接Gitlab,輕松開發web前端應用

然後點開git圖示,發現我們建立的index.html檔案已經在裡面了,點選它右邊的加号,如圖5

圖5

VS Code連接配接Gitlab,輕松開發web前端應用
VS Code連接配接Gitlab,輕松開發web前端應用

然後點選暫存按鈕,如圖6,提示要輸入資訊的話,随便輸入個東西就行

圖6

VS Code連接配接Gitlab,輕松開發web前端應用
VS Code連接配接Gitlab,輕松開發web前端應用

然後如圖點選釋出按鈕,如圖7

圖7

VS Code連接配接Gitlab,輕松開發web前端應用
VS Code連接配接Gitlab,輕松開發web前端應用

這下好了,我們已經把index.html送出到gitlab中的項目origin中了,如圖8

圖8

VS Code連接配接Gitlab,輕松開發web前端應用
VS Code連接配接Gitlab,輕松開發web前端應用

(注意了,本實驗假設你已經準備好gitlab環境,并且已經在本地電腦上安裝好git for windows,本地git到遠端gitlab連接配接也打通過,如果這些前提條件你沒做的話,實驗結果可能不會這麼順)