原创声明
本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:
笔名:来碗鸡蛋面
主页:https://www.jianshu.com/u/4876275b5a73
邮箱:[email protected]
CSDN ID:tom_wong666
如题,这是两个问题:
一,如何建立一个vue空白项目;
二,如何把自己的项目上传到github上去。
因为想做一个个人的vue项目,放到github上,就记录了过程,给大家参考。
环境说明:win 10+npm 5.6.0+vue 2.9.6+git 2.18.0.windows.1
下面分步骤介绍。
如何建立一个vue空白项目:
1,资料盘或桌面新建一个文件夹,文件夹名字不要带特殊字符或者中文;
2,进入该文件夹,shift+鼠标右键,选择‘在此处打开Powershell窗口‘进入命令行工具;
3,运行如下代码
vue init webpack xiaoa
说明:xiaoa指向存储你新建项目的文件夹名称;
4,依据系统提示确认项目名称(不能有中文,特殊字符,也不允许有大写),作者姓名,是否启用测试模式等选项,如果没有特殊需求一路默认就好;
5,选择完成后,等待系统生成vue空白项目,视网络情况,一般需要三到五分钟的时间;
6,项目建立完成后,按如下代码操作;
cd xiaoa
npm run dev
cd xiaoa 表示进入xiaoa这个文件夹,我这里是xiaoa,你那边要看你开始设置的是什么。
进入xiaoa文件夹以后,继续用npm run dev 在开发模式下启动建立好的vue空白项目。看到如下提示,代表项目启动OK:
7,在浏览器窗口依据上述端口访问:http://localhost:8080/#/,会看到如下页面:
8,上述7个步骤完成后,在windows中打开第三步建立的文件夹,会看到如下文件,留着这些文件备用:
如何把自己的项目上传到github上去
1,首先你要有一个github账号,如果没有,点击这里去注册https://github.com/;
2,注册完整后,登陆会看到如下界面:
3,点击页面中 Start a project,进入如下页面,在Repository name位置填写项目名称(必填);下面的Initialize this repository with a README是可选项,勾选与否会对后面的git操作产生影响,后面的步骤会讲;Public和Private二选一,Public免费但公开代码,Private付费不公开代码;最后点击Create repository建立项目仓库:
4,建立成功标识如下,点击右边的Clone or download获取如下一串地址:https://git.....................git,复制这个地址备用;
5,资料盘或桌面新建一个文件夹,文件夹名字不要带特殊字符或者中文,这个文件夹作为git本地仓库的存储地使用;
6,进入这个文件夹,右键选择’Git Bash Here‘打开git命令行工具;
7,逐个运行如下代码,第一行初始化此文件夹为git本地仓库,第二行设置你的名字,第三行设置你的邮箱,第三行建立远程库链接,注意这里的地址是你第4步保存的地址:
git init
git config --global user.name '你的名字'
git config --global user.name '你的邮箱'
git remote add origin https://github.com/tom-wong666/test.git
8,到这一部进行分流:
分支1:如果你在第三步建立远程仓库的时候勾选了Initialize this repository with a README,运行如下代码:
git clone https://github.com/tom-wong666/xiaoa.git
运行完成后,你会发现,git本地库中多了一个文件夹,就是跟你远程建立的项目同名的文件夹,比如我这个是xiaoa;
把’如何建立一个vue空白项目‘中第8步保存的vue项目文件夹中,除了README.md之外的其他所有文件,复制保存到你git本地库中clone下来的这个文件夹中。
然后运行如下代码,完成本地库到远程库的推送,注意cd后面跟的是你clone下来的项目文件夹名字,表示进入这个文件夹:
cd xiaoa
git add .
git commit -m '自定义一个描述'
git push origin master
分支2:如果你在第三步建立远程仓库的时候没有勾选Initialize this repository with a README,把’如何建立一个vue空白项目‘中第8步保存的vue项目文件夹(及其所有文件),直接复制保存到你的git本地仓库文件夹中。
然后运行如下代码,完成本地库到远程库的推送:
git add .
git commit -m '自定义一个描述'
git push -u origin master
以上就完成了新建一个vue空白项目并上传到github上的操作。
最后说两点:
1,上面第8步分流的原因:
把本地库的内容推送到远程,用git push
命令,实际上默认是把当前分支master
推送到远程。
如果远程库有文件,就要先克隆远程库文件到本地,然后在本地做文件更新,添加到本地git库,最后推送到远程库上,克隆的过程会把远程master分支和本地master分支关联起来。
如果远程库是空的,我们第一次推送master
分支时,加上了-u
参数,Git不但会把本地的master
分支内容推送的远程新的master
分支,还会把本地的master
分支和远程的master
分支关联起来,在以后的推送或者拉取时就可以简化命令,直接git push/git pull。
2,git push的基本操作:
git add . =>git commit -m '描述'=>git pull=>git push意思是:
暂存所有更新=>把暂存的更新放到本地git库=>拉取远程库更新=>提交本地更新
如果git pull 拉取下来,有文件冲突,必须处理冲突后再次git add . =>git commit -m '描述'=>git push
有两种情况导致了多人协同工作时,需要遵守以上git push的基本操作:
A:本地有未commit的更新时无法pull;
B:本地分支的版本低于远程版本无法push;
为了避免造成莫名的错误,建议大家依照以上的基本操作处理git push;