合成大西瓜修改教程--小白向
前期工作:必要环境、部署本地服务器等点击此处下载必要文件及源码提取码:0328点击此处下载PS软件 提取码:0328点击此处可访问我部署的站点,以供参考第一步,安装 Node.js,可以通过上面的链接下载安装包。安装完成后通过 npm -v 查看是否安装成功。第二步,安装 Vue CLInode.js安装完成后,打开命令行窗口(Win+R输入cmd按回车)输入npm install -g @vue
前期工作:必要环境、部署本地服务器等
点击此处下载必要文件及源码 提取码: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就可以直接访问他托管的网页啦
-
到这里就是教程的全部内容啦,有什么不懂的可以在最右关注,私信我哦(大调吖)
更多推荐
所有评论(0)