感谢@张峰旭提出的项目灵感
本项目是一个图片社交平台，性质类似 ins 本项目的主要动机有两点
- 获取实际使用 vue 进行开发的经验
- 图片是前端优化的关键部分，本项目有助于获取图片处理的实践经验
本项目的主要功能仿照了类似应用的功能
- 实现了常见的登录状态控制功能，以及用户后续对自主信息的修改
- 实现了以图文为核心内容的帖子发布功能
- 实现了点赞/喜欢/收藏计数增减和状态保存的常见互动功能
- 实现了帖子图文信息在应用首页和个人信息页的加载显示功能
- 对照 vue 系列文档的优化建议做了相应处理
- 页面加载优化
- tree-shaking 系列
- 使用主流的打包工具
- 使用 ES module 模块
- 使用依赖分析工具具体分析依赖关系
- 代码分割
- 懒加载路由
- tree-shaking 系列
- 更新优化
- 使 props 尽量保持稳定
- 在特定场景下使用 v-once 或者 v-memo 来跳过大型子树或 v-for 列表的更新
- 通用优化
- 在渲染大型列表的需求时使用虚拟列表
- 如果存在大型不可变数据，则使用 shallowRef 或 shallowReactive 减少响应性开销
- 组件实例的性能负担比 dom 大很多，大型列表中减少组件数量对性能提升很大，需要在抽组件这个问题上做一些权衡
- 页面加载优化
- 由于图片长期是性能优化的关键点，本应用为练习图片优化提供了一些机会，对照 web.dev 的优化建议做了相应处理
- 使用 lazy 属性或 Intersection Observer 实现图片懒加载
- 使用正确图片格式
- 使用图片压缩以及新的图片格式，如 webp
- 尝试使用资源优先级控制，尤其对字体和关键文件
- 后台使用 strapi 4.x
- 由于版本更新，目前基本只能在 node 16.x 版本下运行
- strapi 是一个无头 CMS，不提供前端，但本身有图形界面用于后台管理，可以简单地生成 API
- 本项目中主要定义了用户和帖子的相应字段/变量，如用户姓名和帖子发布时间以及多对多的点赞/喜欢/收藏字段
- 使用中请求 /api/相应 api 即可
- 前台使用 vue3.x + vue-router + vuex 全家桶
- 后台使用
- 默认后台端口为 1337
- 管理员用户名为admin@test.com
- 密码为 Abc-123456
# 在backend路径下
npm run develop- 前台使用
- 默认前台端口为 3000
- 预存用户账号为abcdef@test.com
- 用户密码为 123456
# 在frontend路径下
npm run dev