拼多多风格新年祝福(hpy-pdd)

Github仓库地址
Gitee仓库地址

介绍

这是一款基于 Vue.js 的拼多多风格新年祝福项目。向您说明以下几点：

• 项目使用 MIT 开源协议，这意味着您可以任意地使用、修改、分发该项目代码。
• 由于开发能力限制及使用场景考虑，项目仅支持在 移动端 查看，未考虑 PC端 适配。
• 这是我的第一个 Vue.js 项目,第一次使用 TypeScript ,甚至是第一次制作 web 动画,项目管理混乱(也许压根没有),制作粗糙,还请见谅.
• 尽管我的最初目标是用纯粹的CSS+TS+静态图片制作动画来复刻拼多多风格,但很快我发现这相当困难复杂,工程量巨~~~大.所以最后还是使用了两个 gif(宝箱开盒与星星),也许我该学习一下用AE制作动画或者找一位设计小伙伴[捂脸 🤦😵‍💫],听说lottie相当不错.
• 添加一个抽奖拼盘也许会使风格好歹接近 pdd 点,这会在后续版本中添加.
• 如果你愿意,麻烦为本项目点个 star⭐ 鼓励一下,谢谢!

项目预览

在线预览地址

本地化构建

前置条件

• Node.js
• npm
• vue-vite

安装依赖

安装项目所需的依赖包。

npm install

启动开发服务器

启动开发服务器，进行编译并开启热重载功能，方便在开发过程中实时预览代码更改。

npm run dev

构建

对项目进行类型检查，编译代码，并进行压缩优化，生成可用于生产的构建文件。

npm run build

然后将 dist 文件夹下的内容部署到服务器即可。

采用了以下网络资源

• 代码:打开红包后绽放烟花的效果直接使用了一篇博客的内容,并进行了部分更改,暂时不知道该代码是否可以使用,故将在后续版本中删除该部分代码,自己重写.
• 图片
  • 蛇图 来自可画
  • gif 动图 来自爱给网
• 音效
  • 数钞机 来自耳聆网
  • 烟花 来自耳聆网
• 音乐：Hamili - Lunary (Vlog No Copyright Music) 厂牌：Vlog No Copyright Music
  地址：https://www.youtube.com/watch?v=pUUxWCmW7xg
• 字体：来自ZeoSeven™ Fonts