用Vue全家桶純手工搓了一個開源版「抖音」

ttentau發表於2024-04-16
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/

相關文章