github使用指南 及Vue项目创建

一、初次使用github

 1.进入github官网注册并登陆账号

2.点击右上角头像旁 + 号下的 New repository 创建一个新的仓库

github使用指南 及Vue项目创建

3.填写好对应信息后点击 Create repository 仓库就创建好了


接下来我们需要使用Git来使本地仓库和线上仓库进行关联,这样我们可以把本地代码保存到线上,也可以通过线上代码来恢复本地丢失的代码,线上会记录每一次的操作。

二、Git下载

1.百度搜索Git,打开Git官网,右侧有Download,根据自己的操作系统选择版本下载(傻瓜式安装,下一步下一步就可以了)

2.回到桌面,打开终端/控制台,输入 git --version ,能够输出版本号,就表示安装成功了

github使用指南 及Vue项目创建


接下来我们需要使用SSH key来关联本地仓库和线上仓库

三、关联本地仓库和线上仓库(SSH Key)

1.回到桌面,鼠标右键点击,点击Git bash Here选项进入操作系统

2.执行命令 ssh-****** -t rsa -C "[email protected]回车

此处 “[email protected]”填写自己的邮箱

github使用指南 及Vue项目创建

3.接下来点击三次回车(密码是否填写看个人需求),SSH key就生成好了

4.查看SSH key,执行命令 cat ~/.ssh/id_rsa.pub  ,复制下面的SSH key(图中我涂抹掉了一部分)

github使用指南 及Vue项目创建

5.回到github网站,点击右上角头像进入Settings

github使用指南 及Vue项目创建

6.点击左侧 SSH Keys and GPG Keys ,进入页面点击 New SSH key,接下来我们将复制的SSH key粘贴到key的空白栏中,填写好title,点击Add key,SSH key就配置好了


四、项目的克隆/下载

1.在github网页点击右上角头像下的 Your profile,进入profile页面

github使用指南 及Vue项目创建

2.点击刚才创建的项目,进入项目页面,点击页面中的Clone or download,复制SSH协议

github使用指南 及Vue项目创建

3.回到git bash 操作,执行命令 cd Desktop,把命令行的所在位置切换到桌面,或你想要的任何文件夹下

4.把线上的这个仓库克隆到本地,执行命令 git clone [email protected]:xxxxx/xxxx.git 回车,这时候桌面多了一个名字是你的项目名的文件夹

github使用指南 及Vue项目创建

[email protected]:meatlovera/traval.git
[email protected]:meatlovera/traval.git
[email protected]:meatlovera/traval.git
[email protected]:meatlovera/traval.git
[email protected]:meatlovera/traval.git


本地仓库克隆好之后我们要开始创建Vue的项目了

五、Vue项目创建

1.打开Vue官网,找到安装区块,找到其中的命令行工具Vue CLI

github使用指南 及Vue项目创建

2.打开终端\命令行工具(cmd)根据官网所给的指令进行安装,执行第一条命令 npm install --global vue-cli

(不是git bash!!!)这里如果安装不成功,请检查自己是否先安装了nodejs和npm,没有安装的童鞋请到nodejs官网安装,node会自动把npm也安装好,可以在命令行输入 node -v 以及npm -v 来检测自己是否安装,若输出了版本号,则已经安装了

3.接下来创建Vue项目,使用指令 cd desktop 进入桌面,或者进入你想要的文件夹下,然后执行官网第二条指令 

vue init webpack my-project 将my-projiect改成你的项目文件夹名字
会告诉你说这个文件夹已经存在了,是否要继续往里添加,输入 y ,回车,就会在这个文件夹下构建一个Vue的项目了
4.填写、选择好项目的等等信息
(名称、项目描述、作者、构建方式、是否使用路由、是否需要eslint检测代码规范、是否需要自动化测试、
是否需要端对端、使用何种方式进行包管理)

github使用指南 及Vue项目创建

     前三个不想填直接回车也可以,选择完毕后,vue-cli会自动下载依赖,构建项目。

github使用指南 及Vue项目创建

5.创建完成后会提示你,进入该文件,执行指令 cd traval (这里traval是我的项目文件夹名字,写成你自己的就可以了)

然后执行 npm run dev 项目就运行起来了

github使用指南 及Vue项目创建

进入上图的网址,就可以看到你的项目了,到这一步,项目的环境就彻底搭建好了。


六、将本地仓库更新到github上

1.在命令行里,退出当前项目运行状态,按住 ctrl+c 退出

github使用指南 及Vue项目创建

2.执行指令 git status  可查看到更新了的文件

3.执行指令 git add .   将更新了的文件增加到git本地的缓冲区

3.执行指令 git commit -m '更新说明’(‘更新说明’中写入本次更新的说明)

4.执行指令 git push origin master 上传到github中,回到github中查看刷新,已经上传好了

github使用指南 及Vue项目创建