Vue3 仿抖音短视频应用实战指南：从垂直滑切换到 Mock 后端

Vue3 仿抖音短视频应用实战指南从垂直滑切换到 Mock 后端【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyindouyin-vue 是一个用 Vue3 Vite Pinia 编写的仿抖音短视频项目全屏竖滑切换视频、本地 JSON 模拟后端、页面转场与条件缓存都贴近真实 App。本文带你逐个拆它的核心交互。4 个值得学的设计点先回答学它能得到什么垂直滑切视频流首页用自制滑动组件切换视频一次手势切换一条跳走再回来位置还在。方向感知的页面转场进详情页从右侧滑入、返回从左侧滑入底部 Tab 之间则完全不播动画。有条件的 keep-alive哪些页面进缓存不写死在路由配置里而是根据前进/后退方向动态决定。零后端跑起来axios-mock-adapter 拦截 axios 请求返回本地数据pnpm install之后就能看到完整效果。3 条命令本地跑起仿抖音项目环境要求Node.js 18仓库的 Dockerfile 使用 node:20 构建建议直接用 20和 pnpm。git clone https://gitcode.com/GitHub_Trending/do/douyin cd douyin pnpm install pnpm run dev开发服务器监听 3000 端口在vite.config.ts的server中配置并自动打开浏览器。PC 上要先按F12再按CtrlShiftM切到手机模式布局才正确。启动后首页就是一屏一屏的竖版视频流其中的画面帧长这样仿抖音短视频项目 Mock 推荐流视频帧这些帧是 Mock 数据从public/images/取回的静态图视频字段本身来自public/data/下的.md文件。先看到效果再回头理解原理。交互拆解3 个做出原生感的地方垂直视频流一次滑动正好一条视频现象首页整屏只有一条视频一次上滑完成切换没有回弹错位进入评论页再返回列表停在离开的位置。原理项目没有依赖浏览器原生滚动。src/components/slide/下的SlideVertical.vue等组件自行处理手势判定ScrollList.vue只负责分页——下拉到底就pageNo请求下一页。回来还在原位的关键在src/utils/hooks/useScroll.ts它和 keep-alive 配合onActivated(() { if (mainScroll.value mainScroll.value.wrapper) { mainScroll.value.wrapper.scrollTop mainScrollTop } }) onDeactivated(() { if (mainScroll.value mainScroll.value.wrapper) { mainScrollTop mainScroll.value.wrapper.scrollTop } })页面失活时记下scrollTop重新激活时还原滚动位置就能跨页面存活。页面转场前进和后退怎么区分现象点进详情页新页面从右滑入返回时旧页面右移退出。而底部 5 个 Tab 之间切换完全没有动画瞬间到位。原理路由表src/router/routes.ts是一个有序数组排得越靠后页面越深。src/App.vue里 watch 路由变化用深度差决定转场名if (noAnimation.indexOf(from) ! -1 noAnimation.indexOf(to) ! -1) { return (transitionName.value ) } const toDepth routes.findIndex((v: RouteRecordRaw) v.path to) const fromDepth routes.findIndex((v: RouteRecordRaw) v.path from) transitionName.value toDepth fromDepth ? go : back两端都在noAnimation列表里就清空转场名否则取go从右进入或back从左进入。CSS 侧只有go/back两组translate3d类同样写在src/App.vue的样式块里新增页面不用改转场逻辑。条件缓存返回后列表为什么不会丢现象个人中心把作品列表滚到第二页点进某条视频再返回列表仍在第二页且不重新请求但进某个二级设置页再返回页面是重建的。原理根模板给router-view套了keep-alive :excludestore.excludeNames。某页是否进缓存不是静态配置而是由src/router/index.ts的路由守卫动态维护排除列表if (toDepth fromDepth) { if (to.matched to.matched.length) { baseStore.updateExcludeNames({ type: remove, value: to.matched[0].components?.default.name }) } } else if (from.matched from.matched.length) { baseStore.updateExcludeNames({ type: add, value: from.matched[0].components?.default.name }) }前进时把目标页从排除列表移除让它被缓存后退时把离开页加入列表让它重建。excludeNames存在src/store/pinia.ts配合上一节的useScroll就凑出返回即时光倒流的体验。源码地图每个目录各管一摊src/pages/— 90 多个页面组件按 home、me、message、shop、people、login 分子目录src/components/— 通用组件Scroll、Comment、Share等slide/子目录是垂直滑动器核心src/api/src/utils/request.ts— 接口封装与 axios 实例src/mock/index.ts— Mock 后端拦截/video/recommended/、/video/comments/等请求返回本地数据src/store/pinia.ts— Pinia 全局状态存用户信息与缓存列表excludeNamessrc/router/— 路由表、转场方向判断与缓存守卫src/config/index.ts— 按VITE_ENV切换baseUrl与 history/hash 路由模式public/data/— Mock 数据源videos.md、posts.md、goods.md、comments/等部署上线3 种把 dist 发出去的方式容器化仓库根目录自带Dockerfile两阶段构建node:20 pnpm 打包再拷进 nginx 镜像pnpm run build docker build -t douyin-vue . docker run -d -p 80:80 douyin-vue静态托管pnpm run build产出dist/后直接上传。仓库里的vercel.json已把全部路径重写为index.html解决 SPA 刷新 404。子目录部署如 Pages 类站点跑pnpm run build-gp-pages项目会依据IS_SUB_DOMAINsrc/config/index.ts自动改用 hash 路由同样避免刷新丢失。进阶方向读完就可以上手的 3 件事docs/NOTE.md的 TODO 清单是最好的起点修复真机兼容问题AutoInput在真机上无法输入、100vh 显示异常都列在其中。src/App.vue目前靠动态写--vhCSS 变量绕开 vh 问题但 resize 监听直接整页重载可以改成只更新变量的平滑适配。视频资源治理vite.config.ts已用manualChunks拆包多页引用组件进 common、三方库进 vendor、低频二级页进 other跑pnpm run report可可视化查看下一步是对当前 下一条视频之外的video节点暂停并释放资源。补齐双指缩放NOTE 中列为未完成项src/components/slide/已有手势地基在相册页实现缩放是自然的增量。写在最后douyin-vue 的价值不在于长得像抖音而在于每个交互背后都有一个可验证的落点手势在slide/转场在App.vue缓存在路由守卫数据在mock/。建议先本地跑起来再按本文的 4 个代码位置逐一对照阅读。项目地址即上文 clone 命令中的仓库采用 GPL 许可见仓库根目录LICENSE。【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考