新建一个vue空白项目并上传到github上

原创声明

本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:
笔名:来碗鸡蛋面
主页: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;

你可能感兴趣的:(新建一个vue空白项目并上传到github上)