* 戳上方藍字「 開源先鋒 」關註我
推薦閱讀：
大家好，我是開源君！
抖音，想必大家都不陌生吧？作為一款風靡全球的短視訊平台，它以其海量的優質內容和便捷的操作方式，俘獲了無數使用者的芳心。然而，你知道嗎？你也可以擁有自己的抖音！
今天和大家分享一款非常有趣的開源計畫 -
douyin-vue
，讓大家能夠在實際開發過程中體驗 Vue 在移動端的各種最佳實踐。
計畫簡介
douyin-vue
是一個基於 Vue3、Pinia 等最新技術棧構建模仿抖音的移動端短視訊計畫，實作了抖音的核心功能，包括：
刷視訊
點贊、評論、分享
關註/取消關註
搜尋
個人中心
計畫程式碼簡潔易懂，註釋詳細，非常適合初學者學習 Vue 在移動端的開發。
短短一個多月的時間，
douyin-vue
關註度直線上升，目前在Github上面收獲了7.6K star。
效能特色
douyin-vue 計畫具有以下效能特色：
流暢絲滑的使用體驗，媲美原生 App
基於 Vue3 的響應式數據管理，實作高效的數據更新
使用 Pinia 進行狀態管理，程式碼更加清晰易維護
使用 axios-mock-adapter 模擬後端請求，方便本地開發和測試
安裝部署
計畫基於 Vue 開發的，本地開發需要先配置好 node 環境，然後執行以下步驟：
git clone https://gitee.com/zyronon/douyin.git (中國使用)
https://github.com/zyronon/douyin.git
cd douyin
npm install
npm run dev
然後瀏覽器開啟
http://127.0.0.1:3000
即可存取使用。
也可以透過 docker 或 vercel進行一鍵部署。
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
計畫體驗展示
為了方便體驗使用，計畫作者提供了一個線上體驗的地址：
https://dy.ttentau.top/
計畫首頁
評論
訊息
發視訊作品
我的
搜尋
douyin-vue 計畫是一個非常優秀的 Vue 移動端開發學習計畫，計畫程式碼簡潔易懂，功能豐富實用，並且提供了詳細的使用文件，可以幫助開發者快速上手。
更多細節功能，感興趣的可以到計畫地址檢視：
計畫地址：
https://github.com/zyronon/douyin
