一个基于 Vue3 开源、免费、现代化的移动端短视频应用

项目介绍

Douyin-Vue 是一个模仿抖音（TikTok）的移动端短视频项目，采用 Vue3、Vite5 和 Pinia 实现，旨在提供媲美原生 App 的丝滑流畅使用体验。项目数据保存在本地，通过 axios-mock-adapter 库拦截 API 并返回本地 JSON 数据，模拟真实后端请求。

应用场景

• 短视频分享平台：用户可以浏览、点赞、评论和分享短视频。
• 学习与研究：适合前端开发者学习和研究 Vue3 在移动端的应用和最佳实践。
• 开源项目贡献：鼓励开发者提交功能建议和代码贡献，共同完善项目。

功能模块

视频浏览模块

• 无限滑动效果：实现类似抖音的视频无限滑动浏览。
• 轮播组件：200 行代码实现类似 Swiper.js 的轮播组件。
• 视频播放：支持视频的自动播放和暂停。

用户交互模块

• 点赞与评论：用户可以对视频进行点赞和评论。
• 分享功能：支持将视频分享到其他平台。
• 个人主页：展示用户发布的视频和个人信息。

路由与动画模块

• Vue 路由：使用 Vue Router 实现页面路由管理。
• 转场动画：添加页面转场动画，提升用户体验。
• 条件路由缓存：实现类似传统新闻网站的条件路由缓存。

开发与部署模块

• 本地开发：提供详细的本地开发指南，支持快速搭建开发环境。
• 持续集成与部署：使用 GitHub Actions 实现自动化部署到 GitHub Pages、同步到 Gitee、翻译 README 和打包 Docker 镜像。
• Docker 支持：提供 Docker 镜像，方便在服务器上部署。

功能特点

• 现代化技术栈：采用 Vue3、Vite5 和 Pinia，提供高性能和响应式的用户体验。
• 移动端优化：使用 rem 和动态 vh 实现移动端自适应布局。
• 本地数据模拟：通过 axios-mock-adapter 库拦截 API 并返回本地 JSON 数据，无需真实后端即可开发和测试。
• 开源与免费：项目采用 GPL-3.0 许可证，完全开源且免费使用。
• 持续更新与贡献：项目处于开发初期，新功能正在持续添加中，欢迎开发者提交功能建议和代码贡献。

项目技术栈

• • 前端框架：Vue3
  • 状态管理：Pinia
  • 构建工具：Vite5
  • HTTP 请求：axios
  • API 模拟：axios-mock-adapter
  • 路由管理：Vue Router
  • 代码规范：ESLint + Prettier
  • 持续集成与部署：GitHub Actions

• 容器化：Docker

功能演示

开源地址

https://github.com/zyronon/douyin