项目介绍
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

