如何将本地vue项目上传到github

首先需要一个github账户,可去github的官方网址: https://github.com   注册一个;

需要用到的管理工具git,下载地址:https://git-scm.com/  ;安装

准备工作做好了,开始吧

 

1.1   创建一个本地项目

我的本地项目是通过vue-cli脚手架搭建的,有兴趣的可以点击 这里 看一下;

进到自己的本地项目文件下,右键-选择git bash here(如下图)

 

1.2  建立本地仓库

如上点击git bash here之后即可打开git客户端黑窗口,

输入命令:  git init 初始化,

初始化成功后你会发现项目里多了一个隐藏文件夹.git(.git是隐藏文件,可通过设置显示隐藏文件夹令其显示)

 

然后,将项目中所有文件添加到仓库

输入指令: git add .

注意: git是不能管理空的文件夹的,文件夹里必须有文件才能add

接着,把文件提交到仓库,双引号内是提交注释。

输入指令: git commit -m "注释内容"

 

1.3 创建github仓库

 

登录个人github账户之后,选择 New repository,

接着,根据提示创建一个仓库

如此,一个名为sell的github仓库就创建成功了,我们可以将自己的本地项目上传到sell

 

1.4  关联github仓库

复制github sell仓库的仓库地址,这里选择的是http地址,这样比较简单,没有选择ssh,如有需要,可自行百度设置ssh,

获取到github仓库地址后,将本地仓库与github仓库关联

输入指令: git remote add origin http://github.com/Reda011/sell.git

注:在git客户端直接按 insert 即可粘贴内容

接下来弹出对话框输入自己github帐号密码;

 

关联成功

 

1.5  上传本地项目

输入指令: git push -u origin master

稍等几分钟即可,

 

这样本地代码已经推送到github仓库了,去githubt仓库刷新即可。

 

 

注:第一次发文,难免会出问题,大家尽管提出来,慢慢改进,希望自己能做得更好

 

将前端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]。
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端卡卡西呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值