前期工作：必要环境、部署本地服务器等

点击此处下载必要文件及源码 提取码：0328
点击此处下载PS软件 提取码：0328
点击此处可访问我部署的站点，以供参考

第一步，安装 Node.js，可以通过上面的链接下载安装包。

• 安装完成后通过 npm -v 查看是否安装成功。
  

第二步，安装 Vue CLI

• node.js安装完成后，打开命令行窗口（Win+R输入cmd按回车）
• 输入npm install -g @vue/cli
• 安装完成后输入 vue --version 查看是否安装成功
  

第三步，安装 serve 服务

• 命令行窗口输入 npm i serve -g 命令进行安装
• 安装完成后输入 serve -v 查看是否安装成功
  

第四步，启动服务

• 进入源码包文件夹，输入cmd按回车，打开命令行窗口
  

• 命令行输入 serve 启动本地 Web 服务
  

• 这些步骤都完成后，那么你的项目可以在浏览器上预览了

• 复制命令行中已为你开启的本地服务器地址，粘贴至浏览器打开
  

前期工作完成，进入修改阶段

第一步，下载代码编辑软件（如果只改图片不改代码可以不用）

• 可编辑前端代码的编辑器都可（这里使用Hbuilder X）

• 各瓜图片文件所在文件夹：res/raw-assets 的 0c 、03、5f、13、50、56、66、74、84、ad、d0
  背景图片和底部图片文件所在文件夹：res/raw-assets 的 85、eb，所有文件名不要修改

• 将整个项目拖入编辑器中（只改图片，没下载的可忽略），找到你要修改的文件，这里以res/raw-assets/d0文件夹下的图片为例
  

• 将图片拖入Photoshop中（PS），没有的依然可以通过顶部链接下载

• 将准备好要替换的图片也托人其中，此时我们看到有两个图层，按快捷键Ctrl + T调整位置大小，然后按下回车确认
  

• 选择原图层（下面一个图层），使用左侧魔棒工具选中原图片四个角
  

• 右击图片，点击（选择反向）按钮，此时选中的就是我们需要的像素了
  

• 选择要替换的新图片图层，按下快捷键Ctrl + J复制图层
  

• 可以看到右侧多出了一个图层，点击其他两个图层，按删除键删除图层，只留下新的图层，然后按快捷键Ctrl + S保存
  

• 此时修改完成，打开浏览器，刷新刚刚打开的这个窗口，可以看到修改的图片已经生效
  

• 其他图片修改原理同上

修改完成，开始部署站点

这里使用Github作为网站托管，免费且方便，但由于是国外网站，所以访问会慢，可挂梯子再访问

• 首先，下载git bash软件，以打包至顶部链接
• 注册GitHub账号，可以用QQ邮箱
• 点击界面右上角加号选择 new repository ，新建一个仓库
  
• 输入仓库名称，选择公开，创建仓库，如下图
  
• 创建完成，如下图
  
• 打开你的源码文件夹，右击文件夹，选择Git Bash Here
  
• 输入ssh-keygen -t rsa -C "你的邮箱（这里用你注册GitHub使用的邮箱比较好）"记住别完全复制我的，在本地生成一个ssh密钥

ssh-keygen -t rsa -C "XXXX@XX.com"

• 除了如下图一样让你输入（y/n）的要输入y以外，其他直接回车即可
  
• 生成的密钥默认保存在系统盘，C盘下，用户文件夹下的.ssh文件夹
  
• 打开.ssh文件夹，选择后缀是.pub的文件，右击选择打开方式，用记事本打开，然后按Ctrl + A全选，Ctrl + C复制
  
• 打开GitHub面板，点击头像下拉框的settings（设置）
  
• 找到设置ssh密钥的一栏，新建一个密钥
  
• 起个名字，然后把刚刚复制的密钥粘贴上去，点击添加SSH密钥
  
• 会提示你输入密码，输入完成后即可看到刚刚设置的SSH密钥，会有邮件通知，但是钥匙图标的灰色的
  
• 接下来回到git bash窗口，输入git init，完成后会发现源码文件夹下多出一个.git文件夹
  
• 接着输入git add .
  
• 然后输入git commit -m “第一次提交”，（引号中的文字可修改）

git commit -m “Jennie”

• 然后输入git remote add origin 地址（就是建仓库开始复制的地址）
  

git remote add origin 地址

• 最后输入git push -u origin master将源码上传到GitHub仓库中
  

• 完成后回到仓库页面，发现代码已经完成上传，点击settings
  

• 往下滚动找到GitHub Pages，分支选择master，其他不动，点击save
  

• 稍等片刻，再到GitHub Pages界面，会发现多出一个网址，这个网址就是你部署的网站了
  

• 此时点击网址，即可访问你的网站了
  

• 但是在GitHub上访问很慢，这个时候可以用托管网站：Vercel

• 可以使用GitHub登录，登录完成后点击new project
  

• 很方便的是他会直接检索你GitHub中的仓库、项目，选择刚刚上传的项目，点击import导入
  
  

• 点击continue继续，点击deploy，然后等待他自动导入
  
  
  

• 导入完成后，点击visit就可以直接访问他托管的网页啦
  
  

• 到这里就是教程的全部内容啦，有什么不懂的可以在最右关注，私信我哦（大调吖）