步骤3：本地创建实例vue项目并上传到github上

0. 确保你的本机电脑是有node环境的，使用下面的命令检查一下

image.png

如果没有显示版本号，证明你没有安装node环境，请移步度娘，搜索怎么安装node环境。

0.1 安装好node之后，即得到了npm包管理工具，使用下面的命令检查一下

image.png

如果没有显示版本号，请检查原因。

0.2 使用npm包管理工具安装vue-cli脚手架，安装命令如下：

image.png

如果直接使用npm install -global vue-cli安装的时候，会报没有权限的错误，此时在前面加上sudo即可，这是mac系统的解决方案，windows如果有这种情况，请自行查找解决方案。

1. 使用vue-cli生成vue项目

在任意一个文件夹下，使用vue-cli命令生成项目

image.png

2. 进入App.vue组件页面，简单修改

image.png

4. 使用npm run dev或者 yarn dev启动项目

image.png

5. 浏览器查看修改后的页面

image.png

6. 分享该项目到github上(便于本机修改文件及时更新到服务器上)

image.png

上传的方式有很多种，这里我使用的是我平时比较常用的方法，直接在编辑器(WebStorm)中集成的github。

7. github查看

image.png

此时github上就找到了该项目

8. 此时该步骤暂时结束，接下来就是在服务器上安装git并且登陆上。