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

使用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

作者：WHU_凌晨_Bin
链接：https://www.jianshu.com/p/55f24abd2c52