用Vue全家桶纯手工搓了一个开源版「抖音」

前言

2018年刚入行前端时，公司使用的还是Angular。Angular什么都好，就是写代码时的体验老糟心了，改一个地方，按下保存之后，要等好几秒刷新后才能看到效果，Webstorm无比好用的自动保存，对我来说反而像是一个负担。然而2024年了，Angular已经更新了17版本，还是没有解决这个问题，热替换依然那么的糟糕

在网上冲浪时，发现了刚开始火起来的Vue，大家都在说简单好用上手快，于是抱着试一试的心态照着Vue官网的教程开始学习，并创建了这个项目。一开始只是用来学习Vue练手，后面断断续续的更新，有空就优化下，完成度已经可以达到官方App的80%了

在线访问

Vercel: http://dy.ttentau.top

Github: https://github.com/zyronon/douyin

Gitee：https://gitee.com/zyronon/douyin

Apk下载地址：test-5-app.apk

注意：PC浏览器请用手机模式访问。先按F12调出控制台，再按Ctrl+Shift+M切换到手机模式

注意：手机请用Via浏览器或者Chrome浏览器预览。其他浏览器会强制将视频全屏，导致样式都失效

效果截图

技术栈

由于18年就创建项目了，所以一开始使用的是Vue2 + Vuex + Vue-Router，由于没有后端所以当时用了Mockjs来模拟接口返回数据

最近我把Vue2升级到了Vue3，Vuex也换成了更好用的Pinia。Mockjs已经好几年不更新了，而且不能延迟返回数据，达不到我要的效果，所以接口模拟这方面我换成了axios-mock-adapter这个库，超级好用！

项目所展示的网红

我把这个项目分享到V2EX后，赢得了大家一致的好评，有不少的V友说视频不错，问我项目展示了哪些网红，在此分享下

• 我是香秀
  标签：douyin,Vue,浏览器,抖音,纯手工,https,com,Angular
  From： https://www.cnblogs.com/zyronon/p/18137713