專案類型：前端開源學習專案｜原始碼：GitHub zyronon/douyin

專案簡介

Douyin-Vue 是一個以 Vue 生態系仿作抖音／TikTok 移動端短影音體驗的開源專案。作者將它定位為 Vue 在移動端的實作示例，重點不只是展示影片列表，也包括手勢式瀏覽、頁面轉場、路由及短影音 App 常見互動。

專案 README 提供線上示範：https://dy.typewords.cc/。在桌面瀏覽器查看時，需要切換至手機裝置模擬模式，才能較接近原本的設計體驗。

主要技術棧

  • Vue 3：建立元件化的前端介面。

  • Vite：負責開發伺服器與建置流程。

  • Pinia：管理跨元件及頁面狀態。

  • Vue Router：處理頁面路由及轉場相關邏輯。

  • Axios：提供請求介面。

  • axios-mock-adapter：攔截 API 請求並回傳本地資料，模擬真實後端。

  • TypeScript／Vue TSC：支援型別檢查與較完整的開發流程。

功能與互動重點

  • 以移動端全屏布局呈現短影音內容。

  • 支援連續瀏覽及影片切換的互動模式。

  • 使用路由處理不同頁面，並加入頁面轉場效果。

  • 使用 Pinia 集中管理應用狀態。

  • 透過本地 JSON 資料及 Mock API 模擬後端回應。

  • 使用圖片、影片懶載入等方式改善移動端載入體驗。

  • 提供多種部署方式，包括 GitHub Pages、Docker、Vercel 及 Netlify 相關設定。

值得學習的地方

1. 先以互動體驗為核心

短影音產品的難點不是單純把影片放在頁面上，而是要處理全屏布局、滑動切換、播放狀態、載入時機及路由之間的配合。這個專案適合用來觀察如何把移動端互動拆成可維護的 Vue 元件。

2. 用 Mock API 保持前端可獨立運作

專案以本地資料配合 axios-mock-adapter 模擬後端請求。對學習者而言，這樣可以先集中處理頁面、狀態及互動，不必一開始就建立完整伺服器。

3. 將仿作拆成多個前端問題

從此專案可以拆出多個練習主題：輪播及滑動、條件式路由快取、轉場動畫、動態 viewport 高度、移動端適配、資源懶載入，以及 GitHub Actions 部署。

本地運行

README 建議使用 Git clone 取得專案，而不是直接下載 ZIP，然後安裝依賴並啟動開發伺服器：git clone https://github.com/zyronon/douyin.git、cd douyin、npm install、npm run dev。

啟動後可開啟 http://127.0.0.1:3000。桌面瀏覽器建議按 F12，再使用 Ctrl+Shift+M 切換至手機裝置模式。

部署與建置

專案提供 Vite 建置及多種部署設定。除了直接使用開發伺服器，也可以按 README 的說明建立 production build，或使用 Docker 映像啟動：docker pull ghcr.io/zyronon/douyin-vue:latest、docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest。

實際部署前應按自己的環境檢查 Node、npm／pnpm、Docker 及靜態託管平台版本是否相容。

資料與使用限制

README 說明，專案中的影片及圖片來自網絡公開內容，並列出部分資料來源。公開資料不等於可以任意重新發布；若要把專案部署到公開網站，應自行確認影片、圖片、音樂及其他素材的使用權。

作者亦明確標示專案主要用於學習及研究，不得用於商業使用。專案採用 GPL 授權，進一步修改、再發布或商業整合前，應閱讀 repository 內的 LICENSE，並確認自己符合授權及第三方素材的要求。

適合誰研究

  • 想學習 Vue 3 移動端介面實作的初學者。

  • 想研究全屏短影音瀏覽及滑動互動的前端開發者。

  • 想了解 Pinia、Vue Router 與 Mock API 如何配合的人。

  • 需要一個可拆解研究的 Vue 開源範例，用來練習部署及效能優化的人。

總結

Douyin-Vue 的價值在於把一個熟悉的短影音 App 體驗拆成可研究的前端問題：移動端布局、影片互動、路由轉場、狀態管理、Mock API 及部署。它適合作為學習和實驗起點，但不應直接視為商業產品或完整的抖音替代品；使用內容及再發布前，仍需自行處理授權與素材合規問題。

來源

GitHub：zyronon/douyin｜查閱日期：2026-08-06