// the find
zyronon/douyin
Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile
A TikTok/Douyin clone built with Vue3, Vite5, and Pinia, demonstrating mobile-first UI patterns: vertical video swiping, infinite scroll, comments, and a social feed. There is no real backend — all API calls are intercepted by axios-mock-adapter returning static JSON. This is a frontend learning reference, not an architecture you'd build a product on.
1. The custom vertical swiper is the most interesting piece — implemented from scratch in ~200 lines without an external library, handling gesture physics, virtual rendering, and the snap-scroll feel that makes TikTok addictive.
2. Vue Router caching is handled correctly: navigating back to the video list doesn't re-fetch or reset scroll position, which is a non-obvious problem that most tutorial apps get wrong.
3. CI/CD is genuinely thoughtful: one workflow deploys to both GitHub Pages and Gitee Pages simultaneously (critical for China accessibility), another builds Docker images, another auto-translates the README — more operational maturity than you'd expect from a demo repo.
4. Mobile viewport handling uses rem + dynamic vh to deal with iOS Safari's collapsing address bar, which is the right approach and something many mobile web projects skip until it bites them.
1. There is no backend. axios-mock-adapter intercepts every API call and returns bundled JSON. If you're here to study Vue patterns, fine. If you want to understand how a video platform is structured server-side, this teaches you nothing.
2. Hundreds of full-size images are committed directly to git under public/images — the repo is likely 100MB+ and git operations will be slow. No LFS, no CDN, just raw PNGs in the tree.
3. The content — videos and images — is scraped from real Douyin creators and Xiaohongshu. Combined with the GPL license and the README note that commercial use is prohibited, the legal situation is murky for anyone who wants to do anything beyond running it locally.
4. Desktop preview requires manually opening DevTools and switching to mobile simulation mode. It's a minor friction but you'll forget to mention it and the first person you demo it to will think it's broken.