使用github部署前端vue项目

要在Github上部署前端Vue项目，需要执行以下步骤：

一、创建Github项目

首先，在你的Github个人账号中创建一个新的空项目，并记录该项目的GIT地址。需要注意的是，该项目的名字应该和你将要部署的前端项目名字相同。

二、创建Vue项目

从Vue官方网站https://cn.vuejs.org/下载Vue CLI并安装。接着，使用Vue CLI创建一个新的Vue项目，并且在该项目的根目录下，通过命令行执行以下命令：

npm run build

以上命令将编译你的Vue项目，生成静态文件。在命令执行完毕后，可以在该项目的根目录下看到一个叫做dist的文件夹，这个文件夹中就是刚刚生成的静态文件。

三、部署静态文件

在完成Vue项目编译后，需要将生成的dist文件夹中的所有静态文件上传到Github项目中，同时需要设置Github项目的部署方式为“GitHub Pages”。

有两种方式来上传静态文件：

1. 使用Git提交

使用Git提交代码的方法来上传静态文件是最常用的方式。首先，将Github项目克隆到本地，然后将dist文件夹中的所有静态文件复制到本地项目的根目录中。接着，在本地项目根目录使用Git命令行，将这些文件提交到Github项目的master分支中。最后，在Github项目的后台设置页面中打开GitHub Pages选项，并选择仓库根目录作为部署源。

示例：

git clone <Github项目GIT地址>
cd <你的本地Vue项目>
npm run build
cp -r dist/* <你的本地Github项目根目录>
cd <你的本地Github项目根目录>
git add .
git commit -m "Initial commit"
git push origin master

1. 使用Github Desktop

如果你不想使用Git命令行，可以使用Github Desktop来上传静态文件。打开Github Desktop，将Github项目克隆到本地，然后将dist文件夹中的所有静态文件复制到本地项目的根目录中。最后，在Github Desktop中提交你的更改并推送到Github。

四、访问部署后的项目

在完成部署后，你的Vue项目就已经成功部署到了Github Pages上。在Github项目后台中，可以看到该项目的网页地址。在浏览器中输入该地址即可访问部署后的Vue项目。

示例：

https://username.github.io/projectname/

至此，实现了使用GitHub部署前端Vue项目的完整攻略。