Vue3 实战项目分享：我做了一个高颜值恋爱纪念网站，适合练手，也适合直接二开上线

如果你最近正想找一个 不像管理后台、也不像 TodoList 那么“练习味” 的 Vue3 项目来练手，这篇文章你大概率可以先收藏。

我最近完整做了一版 恋爱纪念网站 demo。
它不是那种只有一个首屏的表白页，而是做成了一个相对完整的内容型网站，包含：

• 首页
• 我们的故事
• 回忆相册
• 回忆旅程
• 专属歌单

这个项目比较适合两类人：

• 有前端基础，想找一个真正有“作品感”的 Vue3 项目练手
• 想自己写，但总是卡在结构、页面、动画、部署这些环节，迟迟落不了地

这篇文章我不只放效果图，也不只讲“我做了什么”，而是想把它当成一个 可以直接参考、可以照着拆、也可以直接继续改的 Vue3 项目案例 来讲清楚。

---

一、先看效果：在线演示地址

在线演示：

https://love404notfound.github.io/00-LoveMemory/

建议先打开演示站，再回来看这篇文章，理解会更直观。

---

二、这个项目为什么适合拿来练手

很多人找 Vue3 项目练手时，常见的问题就三个：

• 项目太简单，只能练到语法层
• 项目太偏后台，做完没有展示欲
• 项目虽然能跑，但很难继续改成自己的作品

这个项目相对特别一点，因为它同时满足下面三件事。

1. 完成度比普通 demo 更高

它不是单页玩具项目，而是一个拆成多个页面的内容型站点。
从页面组织、路由结构到相册、地图、歌单这些模块，已经接近一个可以继续打磨的成品雏形。

2. 视觉上更像“作品”，不是练习题

它的重点不是表单增删改查，而是：

• 氛围感
• 叙事感
• 纪念感
• 页面层次

这类项目做完之后，更适合放进作品集，也更容易拿来做展示、发帖和二次传播。

3. 非常适合二开和定制

这个项目的文字、日期、照片、故事、旅程、歌单，本质上都可以替换。
所以它不仅适合学习，也适合后续继续改成自己的版本，或者做成一类可复用模板。

---

三、整个网站做了哪些模块

目前这个项目主要拆成了 5 个核心页面。

1. 首页

首页承担的是第一眼观感和章节分发的职责，主要内容包括：

• 纪念主题文案
• 在一起时间统计
• 章节入口
• 整体氛围感和视觉定调

它不是简单放一句“我们在一起多少天”，而是更像整个纪念网站的入口页。

2. 我们的故事

这一页用时间线的形式，去承接关系里的重要节点。
相比纯文字堆叠，时间线更适合这种有纪念属性的内容型页面。

适合放：

• 初识
• 确认关系
• 第一次旅行
• 某个特别的纪念日

3. 回忆相册

这是整个项目里比较有记忆点的一页。

目前的设计思路是：

• 桌面端保留 3D 轮播，强调视觉冲击力
• 手机端改成更稳定的相册形式，避免小屏体验失衡
• 页面下半部分补充照片网格，兼顾浏览效率

这比“整页只放一个炫酷轮播”更完整，也更像一个真的可以长期维护的相册页。

4. 回忆旅程

这一页用地图和城市卡片来记录一起去过的地方。
它会让整个项目从“图文展示页”多出一层空间感和旅程感。

5. 专属歌单

歌单页的意义不只是放几首歌，而是让这个项目除了“看”之外，还多了一层情绪承载。
如果后续要做定制，这一页反而是很容易做出个性差异的地方。

---

四、技术栈适不适合 Vue3 学习者

这个项目使用的是：

• Vue 3
• TypeScript
• Vite
• Pinia
• Vue Router
• Tailwind CSS 4
• Leaflet

这套组合很适合有一点 Vue 基础、但还没真正做过完整工程项目的人。

你可以在这个项目里练到的，不只是组件语法，而是这些更接近真实开发的能力：

• 页面拆分
• 路由组织
• 数据驱动页面
• 响应式布局
• 动画体验优化
• 页面级复杂逻辑抽离
• GitHub Pages 部署

---

五、这个项目最值得学的，不是页面，而是结构

很多内容型项目，最开始都容易写成“页面能跑就行”。
但真正决定后期是不是还能继续改的，往往不是某个组件写得有多炫，而是结构清不清楚。

这个项目现在大致是这样组织的：

src/
├── assets/        # 图片、背景、全局样式
├── components/    # 全局通用组件
├── composables/   # 跨页面复用逻辑
├── data/          # 页面内容数据
├── layouts/       # 全局布局
├── router/        # 路由
├── stores/        # Pinia 状态管理
├── types/         # 全局类型
├── views/         # 各业务页面
└── main.ts

这套结构的核心价值是：边界明确。

比如：

• 页面内容放 data/
• 页面视图放 views/
• 全局壳子放 layouts/
• 只有真正跨页面复用的才进 components/ 或 composables/

这样做的好处是，后续换图、换文案、换日期、调结构时，不会把所有东西都搅在一起。

---

六、为什么内容型项目一定要把“内容”和“组件”拆开

这是这个项目里一个非常值得前端初学者学的点。

如果你把下面这些内容都直接写死在组件里：

• 文字
• 日期
• 图片路径
• 故事节点
• 城市信息
• 歌曲数据

那项目短期确实写得快，但后面你每次想改内容，都会变成满项目搜索替换。

后来这个项目把内容集中拆到了 src/data/* 下面，例如：

• src/data/couple.ts
• src/data/story.ts
• src/data/gallery.ts
• src/data/journey.ts
• src/data/playlist.ts

后面为了统一管理图片资源，又单独加了图片映射层。

这种写法的本质，其实就是在做一件很工程化的事情：

页面负责渲染，数据负责组织内容。

你后续如果要二开，最先改的通常不是组件，而是数据文件。

---

七、一个很典型的坑：不是什么都应该放进 Pinia

这一点我很建议有基础但缺乏项目经验的人重点看。

这个项目前期踩过一个很真实的坑：

最开始为了“统一管理”，把首页、故事、相册、旅程、歌单这些数据都塞进了同一个 store。

听起来很合理，但问题马上就出现了：

• 首页首屏本来只需要一部分数据
• 结果整站内容都跟着一起进共享包
• 最终首加载成本被无形放大

后来做性能优化时，思路才真正理顺：

• 需要跨页面共享、首屏就依赖的内容，再放进 store
• 页面私有展示数据，就近留在 src/data/*

这件事特别能帮人建立一个正确认知：

Pinia 是共享状态管理工具，不是“所有数据都往里塞”的总仓库。

如果你以后做博客、作品集、纪念站、内容社区类页面，这个判断会非常重要。

---

八、相册页为什么不能只追求“炫”，还要考虑设备差异

相册页原本最吸睛的部分，是桌面端的 3D 轮播。
这个设计在大屏下效果很好，确实容易让人记住。

但项目在继续打磨时，发现一个很关键的问题：

同样一套交互放到手机端，不一定成立。

原因很简单：

• 小屏幕可视空间有限
• 3D 中心聚焦太强
• 页面上下文容易被切断
• 交互稳定性不如简单直接的滑动相册

所以后面的处理不是“强行把 3D 缩小”，而是换了一种思路：

• 桌面端保留 3D 轮播
• 手机端切换成更稳的相册样式
• 下半部分增加照片网格做补充浏览

这背后最值得学的，不是轮播本身，而是这一句：

响应式设计不是把桌面页面缩小，而是重新判断不同设备上什么体验更合理。

---

九、这类项目真正难写的，往往是动画和细节体验

如果只看页面截图，你可能会觉得这类项目主要难在 UI。
但实际做下来会发现，很多时间反而花在“看起来不起眼”的细节上。

比如这个项目里就有两个典型模块：

• 樱花装饰动画
• footer 鱼群动画

1. 樱花动画如果挂载时机不对，会拖慢首屏

最开始如果把装饰脚本同步塞进首屏链路，很容易让视觉特效先抢掉性能预算。
所以后面做了几件事：

• 异步加载
• 延后挂载
• 避开首屏关键渲染阶段

这类优化不会直接出现在页面截图里，但会直接影响“打开网站时顺不顺”。

2. footer 鱼群动画最难的是跨屏幕体验一致

这个模块看起来只是一个 Canvas 装饰，但其实很容易踩坑：

• 笔记本屏幕上看着刚好
• 手机端鱼会显得太小、太慢
• 超大屏又会显得太大、太迟缓

最后的修正思路并不是随便改几个速度值，而是重新做了这些判断：

• 以满意的笔记本观感作为参考尺寸
• 对鱼体大小和运动速度增加上下限钳制
• 使用按帧时间步进，减少不同设备帧率差异带来的迟滞感
• 控制数量增长范围，避免大屏过于拖沓

这件事会让你真正理解：

动画的响应式，不是线性缩放，而是体验标定。

---

十、地图模块为什么很适合拿来练“工程思维”

很多人第一次做旅程地图，会觉得：

“不就是放个地图、打几个点吗？”

真做起来你会发现，它经常比普通页面更容易把人卡住，因为会同时涉及：

• 地图实例初始化
• GeoJSON 资源加载
• 省份高亮
• marker 显示节奏
• loading / error 状态
• 卸载时清理实例和定时器
• 部署后静态资源路径适配

这类逻辑如果全写在页面组件里，很快就会变乱。
所以项目里把地图逻辑单独抽到了页面专属 composable 里处理。

这也是很值得学习的一种思维：

页面专属复杂逻辑，不一定放全局，但也不该硬塞进页面模板本身。

---

十一、如果你想自己练手，这个项目最值得重点研究什么

如果你是学习者，我建议你不要只盯着“页面怎么写得好看”，而是重点看下面几类问题。

1. 路由怎么拆

这个项目不是一个单页堆叠页，而是按业务拆成多个页面。
这件事会直接影响后续结构是否清晰。

2. 数据怎么驱动页面

不要把所有文字和图片写死在模板里。
内容型项目越早做数据层拆分，后面越轻松。

3. 布局和页面怎么分层

导航、全局氛围、页脚和内容区，不应该全部混在页面里。

4. 响应式怎么做判断

响应式不是“列数从 4 变 2”这么简单。
很多时候连交互方式本身都需要改。

5. 性能优化怎么做取舍

不是所有看起来好看的效果都应该抢首屏。
装饰动画、共享数据、背景资源这些地方都值得单独审视。

6. 部署链路怎么打通

项目最终能上线、能分享、能展示，这一步非常重要。
很多人不是不会写页面，而是卡在了最后一公里。

---

十二、如果你已经不太想从零写了，其实也可以直接在现成项目上继续改

说句很现实的话。

这类项目最容易卡住的，不是完全不会写的人，而是这种状态的人：

• 会一点 Vue3
• 也能看懂大概结构
• 知道页面应该长什么样
• 但真开工后迟迟落不到成品

你可能会经历这样的过程：

1. 觉得自己可以从零搭
2. 开始写以后发现结构、样式、动画、数据都开始互相缠绕
3. 地图、部署、移动端适配这些细节陆续冒出来
4. 项目最后长期停在“本地做了一半”

如果你已经处在这个阶段，其实更现实的方式往往不是继续硬熬，而是：

• 先在完整项目上研究结构
• 先跑起来一个能上线的版本
• 再逐步替换成自己的文案、图片和日期

这样能节省掉很多完全没必要反复试错的时间。

---

十三、我目前把这个项目整理成了三种版本

为了方便不同需求的人，我这边目前整理成了 3 种方式。

1. 源码版：免费

适合：

• 想研究项目结构的人
• 想自己换文案、图片、日期的人
• 有前端基础，但不想从空目录起步的人

2. 源码 + 部署版：29.9

适合：

• 想直接拿到可访问成品的人
• 不想再折腾 GitHub Pages 和部署细节的人
• 想节省环境配置和上线排错时间的人

3. 定制版：49.9

适合：

• 想直接做成送对象的成品网站
• 想替换成自己的照片、故事、旅程和歌单
• 想在现有基础上增加个性化内容的人

如果你只是学习，收藏这篇文章就够了。
如果你已经卡在“我知道该学什么，但就是迟迟做不出来”的阶段，那直接在现成版本上继续改，通常会更省时间。

网站展示页

这个项目最适合两类人：

• 想把 Vue3 项目真正从 0 到 1 做完整一次的人
• 不想再从空白项目硬搭，但想尽快拥有一个能跑、能改、能上线版本的人

如果你现在正好卡在这两类需求之间，这个项目大概率会对你有实际帮助。