Douyin-Vue
English | Spanish | German | French | 简体中文 | 日本語
douyin-vueis a parody抖音|TikTokmobile short video project.Vue"Best practices" on the mobile side, comparable to nativeApp 丝滑流畅的使用体验。使用了最新的 Vuetechnology stack, based onVue3、Vite5、Piniaaccomplish. The data is saved locally in the project throughaxios-mock-adapterThe library intercepts the API and returns local json data to simulate real backend requests.
Online access
Github Pages:https://dy.ttentau.top/
Link
[Imitation Douyin Series] 1:200 lines of code to implement a carousel component similar to Swiper.js
[Imitation Douyin Series] 2:Realize the "infinite sliding video" effect on Douyin
[Imitation Douyin Series] Three:Introduction to using Vue routing and adding transition animations
[Imitation Douyin Series] Four:Vue conditional route caching, just like traditional news sites
[Imitation Douyin Series] Five:Github Actions deploy Pages, synchronize to Gitee, translate README, package docker image
run
Note: This project is only suitable for study and research, not for commercial use
Quickly deploy to Vercel
Deploy to Docker
# 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
local development
Note: The git command must be cloned to run. Downloading the zip package cannot run. If the clone speed is too slow, it is recommended to use the gitee address
git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git
cd douyin
npm install
npm run dev
Open your browser and visit:http://127.0.0.1:3000
注意：需要将浏览器切至手机模式，先按 F12To bring up the console, pressCtrl+Shift+Mto preview normally
Data Sources
The video comes from the following Douyin celebrities
我是香秀 🐂🍺: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/
Picture from Xiaohongshu public notes
The above content is all public information on the Internet
Features and suggestions
The project is currently in the early stages of development and new features are being added continuously. If you have any features or suggestions for the software, please feel free to contact us.Issuesraised in
If you also like the design ideas of this software, please submit itPR, thank you very much for your support!
contact me
You can contact my emailzyronon@163.com
Share my other open source projects:
Typing Word- Vocabulary memorization software that can be used on the web~
Web Scripts- Some useful Grease Monkey scripts~
