原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
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；