用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友说视频不错,问我项目展示了哪些网红,在此分享下
- 我是香秀🐂🍺: https://v.douyin.com/iYRAPA2L/
- 杨老虎🐯(磕穿下巴掉牙版): https://v.douyin.com/iYRA56de/
- 条子: https://v.douyin.com/iYRAaqjr/
- 达莎Digi: https://v.douyin.com/iYRA6rwT/
- 小橙子: https://v.douyin.com/iYRAnudw/
- 南恬: https://v.douyin.com/iYRAbKm3/
- 小霸宠牛排🥩:https://v.douyin.com/iYRSosVB/
- 奶茶妹◕🌱: https://v.douyin.com/iYRACKhP/
- 我才是岚岚: https://v.douyin.com/iYRAQM1C/
- 周憬艺ziran: https://v.douyin.com/iYRAQs4h/
- 刘思瑶nice: https://v.douyin.com/iYRAaERn/
- 彭十六elf: https://v.douyin.com/iYRAHrVG/
- 李子柒:https://v.douyin.com/iYRA5B88/