前言
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/