手记

基于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


0人推荐
随时随地看视频
慕课网APP