大家都已经刷了不少短视频,常常会遇到这样的烦恼:想把喜欢的视频保存下来反复观看,却发现视频突然被删除了;想整理一个主题的视频合集,却找不到合适的工具。
如果能有一个私人的视频库,聚合自己感兴趣的视频内容,那该是多好!
今天要给大家介绍一个基于 Vue 技术栈的开源项目:Douyin-Vue,让我们轻松搭建属于自己的短视频平台!
项目介绍
这款名为 Douyin-Vue 的开源项目,完美复刻了抖音的核心功能,有着以下特点:
-
丝滑流畅的视频滑动体验,媲美原生 App 的观感;
-
完整的视频播放控制,支持暂停、进度调节;
-
已实现了视频列表、个人主页、点赞、评论、分享、商城、直播等功能;
-
采用 Vue3、Vite5、Pinia 等最新技术栈;
-
响应式设计,完美适配各类移动设备;
-
代码完全开源,可以自由定制功能;
-
支持本地数据存储,无需额外服务器;
-
兼容多种部署方式,包括 Docker、Vercel 等。
快速上手
想要快速搭建自己的视频站,我们有多种选择:
-
一键部署到 Vercel(推荐):
-
直接点击项目中的 "Deploy with Vercel" 按钮
-
几分钟内即可完成部署,获得专属域名
-
-
Docker 部署:
docker pull ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
-
本地开发:
git clone https://gitee.com/zyronon/douyin.git
cd douyin
npm install
npm run dev
打开浏览器并访问: http://127.0.0.1:3000
注意:需要将浏览器切至手机模式,先按 F12
调出控制台,再按 Ctrl+Shift+M
才能正常预览。
提醒一下,项目仅适用于学习和研究,不得用于商业使用。
项目演示
为了方便大家体验,提供了一个已经部署好的在线网站。
首页:
评论列表:
直播间:
个人主页:
商城:
写在最后
有了这个开源项目,我们终于可以轻松搭建自己的短视频平台了。
无论是想要收藏喜欢的视频,还是整理特定主题的内容合集,都能得心应手。
如果你是一名前端开发工程师,将该项目作为深入学习 Vue 语言也是一个非常不错的选择。