天云导读
2024年，一位开发者用Vue全家桶从零实现了一个高仿抖音的移动应用——没有借助任何现成模板，全靠“手搓”完成，并已全开源。项目复刻了抖音的核心交互：短视频上下滑动切换、点赞动效、评论区弹出、多视频流布局，界面高度还原原生体验。更关键的是，它完整跑通了前端技术链路：基于Vue 3 + Vite + Pinia构建状态管理，适配移动端手势操作，并通过模拟数据实现流畅播放逻辑。PC端需切换手机模式预览，避免浏览器强制全屏破坏样式。该项目不仅是一次对主流短视频App的深度技术拆解，更为前端开发者提供了实战级参考案例——想掌握现代Vue在复杂交互场景下的应用？这或许是你见过最硬核的练手项目。
— 来自外星热心的网友
<div>
简介：
用Vue全家桶手工搓了一个高仿抖音，全开源
PC浏览器请用手机模式访问。先按F12调出控制台，再按Ctrl+Shift+M切换到手机模式，手机请用Via浏览器或者Chrome浏览器预览。其他浏览器会强制将视频全屏，导致样式都失效。
运行项目：
本项目是基于 Vue 开发的，需要 node 环境来运行。
1. 安装 NodeJS，参考官方文档
2. 安装 pnpm 包管理工具，运行 npm install -g pnpm 来安装
3. 上传项目源码到项目根目录
4. 进入项目目录cd douyin，在项目根目录下，运行pnpm install来下载依赖。
5. 执行pnpm dev来启动项目，项目默认地址为http://localhost:3000
6. 在浏览器中打开http://localhost:3000 来访问项目。 Chrome 切换成手机模式快捷键，先按 F12 调出控制台，再按 Ctrl+Shift+M（设备仿真模拟）
免责声明：
本项目仅适用于技术研究和分享，不得用于商业使用 作者：zyronon
著作权归原作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
图片：
- 最新
- 最热
只看作者