yarn新建VUE项目并上传到github上

本文详细介绍了在Windows10系统中,如何从零开始创建Vue项目,包括安装必要的环境,解决可能出现的问题,直至成功运行项目。同时,文章还阐述了如何将本地Vue项目上传至GitHub,包括初始化本地仓库、创建GitHub仓库、关联远程仓库并推送代码。此外,还提供了检查和切换Git账号的技巧。
摘要由CSDN通过智能技术生成
  1. 首先准备node,npm,yarn环境,本人window10环境。
  2. 新建VUE项目
    yarn global add @vue/cli(遇到问题1:vue不是内部或外部命令?window10左下角搜索“编辑系统环境变量 ”,然后在系统变量Path里加入D:\Program Files\nodejs\node_global\bin。遇到问题2:文件名、目录名或卷标语法不正确?D:\Program Files\nodejs\node_global\bin的vue.cmd用编辑器打开将@"%~dp0\C:\Users\xiao\AppData\Local\Yarn\Data\global\node_modules.bin\vue.cmd" %* 替换为 @“C:\Users\xiao\AppData\Local\Yarn\Data\global\node_modules.bin\vue.cmd” %*)
    vue create my-demo(my-demo是我的项目名称,你可以随意起名)

    然后根据提示 cd my-demo, yarn serve就可以在浏览器http://localhost:8080/网址下看到你创建的vue项目了(有的人是yarn run dev之类的命令启动 所以注意看一眼。)
  3. 将本地新建的VUE项目上传到GitHub(本地电脑要有git,可以现在cmd下输入git命令 如果出现git不是内部或外部命令,需要自行下载安装git.)
    建立本地仓库
    找到项目文件夹“D:\LuckyBackup\VUE\Demo\my-demo”,在文件夹下右键点击Git Bash Here。在这里插入图片描述
    在git命令窗口输入"git init"初始化,会出现一个隐藏.git文件,可通过显示隐藏的项目就看见啦。在这里插入图片描述然后,将项目中所有文件添加到仓库“git add .”(注意: git是不能管理空的文件夹的,文件夹里必须有文件才能add。重点注意 add 后边的 **.**由于第一次忘记了.害我多浪费了一小时查错 ),接着,把文件提交到仓库"git commit -m "提示自己知道这次提交是为了什么的语句"
    在这里插入图片描述
    创建github仓库
    登录个人github账户之后,然后 New repository,在这里插入图片描述在这里插入图片描述到这里,我们的github仓库就创建成功了。
    本地仓库关联github仓库
    复制github的仓库地址,这里选择的是http地址,比较简单,没有选择ssh,如有需要,可百度设置ssh。在这里插入图片描述
    然后"git remote add origin https://github.com/ChengCheng-Lisa/my-demo.git"然后"git push -u orgin master"然后授权你的github账户和本地git关联(也可以输入用户名和密码) ,github上就可以看到你刚刚的项目啦。
    在这里插入图片描述

在这里插入图片描述
4. 附带知识点: 如何在本地查询关联的github账户(由于我是有2个账户,所以考虑到了这有一点)
window10左下角搜索“控制面板” ,然后是所有控制面板项,凭据管理器,windows凭据下面的普通凭据。这个可以看当前电脑git绑定的账号信息。
在这里插入图片描述在这里插入图片描述
查看当前git用户名: git config user.name
查看当前git邮箱: git config user.email
切换git用户名: git config --global user.name "YOURUSERNAME"
切换git邮箱: git config --global user.email "YOUREMAIL"
在这里插入图片描述
也可以使用cmd命令打开控制面板
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值