下载和运行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博客_码云怎么下载项目