下载和运行GitHub上的代码教程总结

大家好，又见面了，我是你们的朋友全栈君。

之前做学校的毕业设计，想从Github上下载一个Vue项目作为模板，由于之前没有从gitHbu上克隆项目的经验，结果花了大半天在从github上面把项目克隆下载。现在有时间记录以下，方便其他小伙伴一起学习。

如何从GitHub上下载项目：

一：准备账号

首先，注册GitHub账号及配置

GitHub传送带

账号申请及配置参数

二：安装Git 工具

廖老师Git安装教程传送带

三：项目下载

1、登录GitHub账号

2、搜索项目

3、下载项目

3.1 三种方式  

• Open in Desktop，如果你安装了GitHub的客户端的话，那么你直接点左下角的Open in Desktop,就可以在你本地的客户端直接打开，用得不多；
• Download Zip，可以直接下载项目的压缩包到你的电脑上，用得不多；
• 代码克隆，工作中基本都是通过git clone的方式拉取项目代码，下面详细介绍。

3.2 Git Clone 的两种方式

• 通过Http的方式克隆项目，如果账号没有添加SSH密钥，那可以用HTTP的方式克隆项目
• 通过SSH的方式克隆项目，账号有添加SSH密钥

3.2.1 通过HTTP的方式克隆项目

•    复制项目地址，点击红色框的位置或者双击链接

• 打开你想要存储的该项目的位置（如E:\Project），鼠标右键，点击Git Bash Hear，弹出Git命令窗口，输入git clone 你复制的项目地址，如下所示，然后回车

当弹出如下所示的时候，表示你已经下载成功了。

这个时候，你再进入你保存文件的位置，就会发现已经有一个文件夹了。

3.2.2 通过SSH的方式下载项目。

关于配置SSH的方式可以参考我记录的另一个博客：Git配置SSH及通过IDEA连接GitLab方法总结

如果你是登录的状态，并且已经添加过SSH密钥，那么你在点击Clone orDownload的时候，就会出现：

那么就如同上面通过HTTP的方式下载项目一样，复制ssh的克隆地址。然后在Git Bash的命令窗口输入git clone 你复制的地址，回车，然后直到出现下一个$的时候，表示下载成功。

四：实战演练

登录账户

搜索项目

 克隆项目

查看项目文件

项目文件中一般会有项目的介绍，一般先看readme文件

打开项目【只演示前端项目】

 打开Terminal 输入命令【或者通过命令行窗口，在项目文件路径下输入命令】

如出现上图情况，说明Node应该是还没安装。此时打开命令行窗口检查下配置

查看node 版本，如果没有版本显示或提示 “node 不是内部或外部命令，也不是可运行的程序或批处理文件。”，说明node还没安装，需要重新安装。

安装Node

node-v8.11.1-x64【百度网盘资源免费】

链接：https://pan.baidu.com/s/1gQfCX3Gzn1o-UG14FiXnqw  
提取码：k9hr 

更多资源可以参考我的另一个博客【构建Vue-cli步骤总结】

下载网盘中的安装包后，一步一步点击下一步直至安装完成即可。【安装包方式安装Node，一般会自动配置好系统环境，如果是解压包方式安装，则需要手动配置环境】。此处忽略，详情可参考：node.js 安装详细步骤教程_老油条-CSDN博客_node.js安装步骤

安装后检查Node 版本信息

Vue 构建环境搭建

NodeJS 安装成功之后，接下来安装 Vue的工具：

一般使用npm install来构建下载依赖，执行 npm install 命令时，默认使用的是国外的下载源 ，可以通过如下代码配置为使用淘宝的镜像：

    npm config set registry https://registry.npm.taobao.org

打开命令行窗口，安装vue脚手架配置 

npm install -g vue-cli   # 只需要第一次安装时执行

构建项目

npm install

运行项目

npm run serve

访问项目：http://localhost:8080/#/

最近很多小伙伴联系我问一些关于本篇博客的疑问点，于是我决定重新补充了第四点实战演练。再者，发现有一些小伙伴copy或转载之前写的存在很多问题的博客，于是决定把这博客重新改版，同时也希望copy或转载的小伙伴能同步更新以免误导别人。

以上内容，如有问题，欢迎指教！

   更多的细节可以参考：怎么样从GitHab、GitLab、码云等下载代码？_不怕万人阻挡，只怕自己投降-CSDN博客_码云怎么下载项目