基于Element-UI的Vue管理后臺搭建(二) 代碼管理

作為前端開發人員,使用Git管理代碼是必不可少的技能,關于Git的使用流程,已經有很多的文章,具體可以參考廖雪鋒的網站Git教程,英文好的同學,可以參考Git官網

使用Vue-cli@3搭建好后臺后的基礎框架之后,就是將我們的項目放在Git上,Git管理的有很多,國內的有碼云、國外比較流行的有Github、或者自己搭建一個Gitlab也可以。這里我們推薦使用Github來管理自己的代碼。使用Github,首先你得有Github的帳號,注冊是比較簡單的,這里就不做介紹了,下面介紹下如何一步步將自己的代碼上傳到Github上,并做一個版本分支的管理

1. 在Github上創建項目

點擊個人頭像,在下拉列表中選擇Your repositories

進入個人倉庫

2. 初始化項目

進入到個人倉庫,在個人倉庫中,包含你自己的項目以及你fork的一些項目,點擊右上方的New按鈕,一般Git項目中會需要填寫以下幾項:

  1. 項目名稱(必填)
  2. 項目描述
  3. 項目是公有還是私有
  4. 是否初始化Readme
  5. 是否添加gitignore
  6. 選擇項目license如果是個人學習性質的項目,一般填寫下1和5即可


    配置項目屬性

    項目創建完成之后如下圖


    image.png

3. 上傳代碼

在已打開的項目中,點擊右上方的Clone or download按鈕,在彈出的對話框中,點擊地址旁邊的copy按鈕,復制項目地址

image.png

在個人的項目文件夾中,使用git命令,克隆項目,我們這邊使用vscode,在使用git命令之前,請確保你已經安裝了git
image.png

克隆成功后,項目如下:
項目中包含.gitignore和LICENSE兩個文件,其他都是空的
image.png

接下來我們使用vue-cli@3初始化一個基于element-ui的項目,具體可參考上一篇文章基于Element-UI的Vue管理后臺搭建
跟之前文章有區別的是,我們是已經克隆了一個項目下來了,所以可以先創建一個項目,然后把整個項目拷貝過來
注意不要拷貝.git和git相關的文件/文件夾

  1. 選擇創建項目


    image.png
  2. 填寫項目信息


    image.png
  3. 選擇手動配置項目(為了讓大家清楚每個配置)


    image.png

    image.png

    image.png

    完成配置后,添加Element-UI插件


    image.png

    image.png

    完成之后點擊【完成安裝】(這里忘了截圖了)
    安裝之后項目目錄結構如下:
    image.png

    安裝完成后,將整個項目拷貝到我們的git項目中


    image.png

在命令行中輸入以下命令

git add .
image.png
git commit -m 'init project'
image.png

最后使用

git push

將我們的代碼推送到github服務器


image.png

此時刷新我們的github項目,就可以看到項目已經推送上來了


image.png

歡迎加群討論


圖片發自簡書App
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容