Vue项目上传到GitHub上

本文档详细介绍了如何将Vue项目上传到GitHub,包括下载并安装git,注册GitHub账号,创建仓库,以及处理上传过程中遇到的问题,如远程来源已存在和SSL连接错误的解决方法。

一、下载git 并安装在电脑上

        https://git-scm.com/downloads

二、注册GitHub账号

        https://github.com/

        支持GitHub的浏览器如下:Chrome,火狐,微软浏览器

(1)注册

(2)输入邮箱,然后点击 continue

(3)设置密码,创建用户名(建议名字取得有意义些)

(4)这里有个验证

 (5)点击下面的Start puzzle开始,连续选择出漩涡星系,我注册的时候需要选择3次,注意如果错一次就要重新开始!

(6)验证成功后,点击Create account,然后会给你的邮箱发送一个验证码,根据你收到的输入即可:

(7)根据自身情况进行相应个性化设置(如果不想设置可以点击下方的跳过)。 (8)继续(如果不想设置可以点击下方的跳过)

 (9)选择free(如果不想设置可以点击下方的跳过)

 (10)到了这个页面,GitHub便创建好了

三、使用GitHub(项目上传)

 (1)创建仓库

(2)第一次上传,运行指令(我是搜的之前的教程,所以没用这个)

 (3)首先,打开本地创建好的vue项目文件,右键点击Git bash Here,打开Git命令工具,输入git init 回车运行,生成.git文件

git init                                                     初始化空的仓库

git add .                                                  添加想要上传的文件

git commit -m "first commit"                   提交文件到仓库

git remote add origin https://github.comxxx.git         添加origin

git push -u origin master                        上传文件

(4)到了这步之后会出现一个弹框,要输入用户名及密码,但是发现用户名+密码上传被更改了,改为用token代替密码,所以我们要先申请一个personal access token

(5)创建 personal access token

  1. 登录 github
  2. 在页面右上角点击你的头像,然后点击 Settings
  3. 在左侧边栏中,点击开发人员设置:

  4. 在左侧边栏中,单击个人访问令牌:

  5. 单击生成新令牌:

  6. 为您的令牌指定一个描述性名称(一定要填):

  7. 要让您的令牌到期,请选择到期下拉菜单,然后单击默认值或使用日历选择器:

  8. 选择您要授予此令牌的范围或权限。要使用您的令牌从命令行访问存储库,请选择repo:

  9. 单击生成令牌:

(6)返回第四步,填好用户名和token,项目就上传成功啦

四、问题

1、fatal: remote origin already exists. (远程来源已经存在)

解决办法:输入$ git remote rm origin(删除关联的origin的远程库),再继续之前的流程就可以了

2、fatal: unable to access 'https://github.com/xxx/autowrite.git/': OpenSSL SSL_read: Connection was reset, errno 10054(提交或克隆报错

原因一因为git在拉取或者提交项目时,中间会有git的http和https代理,但是我们本地环境本身就有SSL协议了,所以取消git的https代理即可,不行再取消http的代理。

原因二:当前代理网速过慢,所以偶尔会成功,偶尔失败

解决办法:在项目文件夹的命令行窗口执行下面代码,然后再git commit 或git clone
取消git本身的https代理,使用自己本机的代理,如果没有的话,其实默认还是用git的

//取消http代理

//取消http代理     

git config --global --unset http.proxy

//取消https代理

git config --global --unset https.proxy

将前端Vue代码上传到GitHub可按以下步骤操作: 1. **创建GitHub仓库**:在GitHub上创建一个新的仓库,记下仓库的URL(例如 `https://github.com/your-username/my-vue-project.git`)[^1]。 2. **初始化本地Git仓库**:在命令行中,使用 `cd` 命令进入本地Vue项目的根目录,然后运行 `git init` 来初始化一个新的Git仓库。示例命令如下: ```bash cd /path/to/your/vue-project git init ``` 3. **创建 `.gitignore` 文件**:在项目根目录下创建 `.gitignore` 文件,用于指定Git忽略哪些文件或文件夹。可以手动创建该文件,也可以使用以下命令创建: ```bash touch .gitignore ``` 在 `.gitignore` 文件中添加内容以忽略 `node_modules` 文件夹和其他不需要上传的文件。 4. **添加和提交项目文件**:使用 `git add` 命令将项目文件添加到暂存区,然后使用 `git commit` 命令提交这些更改。示例命令如下: ```bash git add . git commit -m "Initial commit" ``` 5. **关联本地仓库和GitHub仓库**:使用 `git remote add` 命令将本地仓库与GitHub上的远程仓库关联起来。示例命令如下: ```bash git remote add origin https://github.com/your-username/my-vue-project.git ``` 6. **推送代码到GitHub**:使用 `git push` 命令将本地仓库中的代码推送到GitHub上的远程仓库。示例命令如下: ```bash git push -u origin main ``` 这里的 `main` 是默认的主分支名称,如果你的分支名称不同,请相应地进行替换。 另外,如果要将Vue项目发布到GitHub Page,还需要做一些额外的配置。在和 `package.json` 同级的地方新增一个 `vue.config.ts` 文件,添加如下代码设置为相对路径;如果是Vite创建的项目,则在 `vite.config.js` 中添加 `base: './'`: ```javascript // vue.config.ts module.exports = { publicPath: './', } // vite.config.ts base: './', ``` 然后修改路由模式,找到 `router/index.js` 文件,将 `history` 修改为 `hash`,再进行打包 [^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值