douyin Documentation

Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile

11,546 stars Vue Vue 7 files · ~8,830 tokens #douyin#js#tiktok#vue#vue3
RAW Doc

Docker & Self-Hosted Deployment Verified OCI

Deploy douyin on any server, homelab, or cloud container platform.

1-Click Terminal Command
bash (docker run) 
docker run -d --name douyin --restart always zyronon/douyin:latest

Technical Documentation: zyronon/douyin

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (README.md)

Douyin-Vue

douyin-vue 是一个模仿 抖音|TikTok 的移动端短视频项目。Vue 在移动端的"最佳实践"，媲美原生 App 丝滑流畅的使用体验。使用了最新的 Vue 技术栈，基于 Vue3、Vite5
、Pinia实现。数据保存在项目本地，通过 axios-mock-adapter 库拦截Api 并返回本地json数据，模拟真实后端请求

在线访问

Github Pages: https://dy.typewords.cc/

链接

【模仿抖音系列】一：200行代码实现类似Swiper.js的轮播组件
【模仿抖音系列】二：实现抖音 “视频无限滑动“效果
【模仿抖音系列】三：Vue 路由使用介绍以及添加转场动画
【模仿抖音系列】四：Vue 有条件路由缓存，就像传统新闻网站一样
【模仿抖音系列】五：Github Actions 部署 Pages、同步到 Gitee、翻译 README 、 打包 docker 镜像
【模仿抖音系列】六：使用rem、动态vh自适应移动端

运行

注意：本项目仅适用于学习和研究，不得用于商业使用

快速部署至 Vercel

部署到 Docker

bash
# 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

本地开发

注意：必须 git 命令 clone 下来才能运行，下载 zip 包是无法运行的。如果 clone 速度太慢，推荐使用 gitee 地址

bash
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

注意：需要将浏览器切至手机模式，先按 F12 调出控制台，再按 Ctrl+Shift+M 才能正常预览

数据来源

视频来源于以下抖音网红

图片来自于小红书公开笔记

以上内容均是互联网公开信息

功能与建议

目前项目处于开发初期，新功能正在持续添加中，如果你对软件有任何功能与建议，欢迎在 Issues 中提出
如果你也喜欢本软件的设计思想，欢迎提交 PR，非常感谢你对我们的支持！

联系我

您可以联系我的邮箱 [email protected]

分享我其他开源项目：

_**Typing Word
** - 可在网页上使用的背单词软件~ _
_**Web Scripts
** - 一些好用的油猴脚本~ _

许可协议

GPL

NOTE (`docs/NOTE.md`)

核心技术拆解（TODO）

  • 手机端抓包
  • 首页无限滚动
  • me页面滚动逻辑
  • 通话进入和挂起动画

TODO

  • 双指缩放
  • AutoInput组件，在真机上无法输入
  • 真机上100vh显示异常的问题

README.De (`docs/README.de.md`)

Douyin-Vue

douyin-vueist eine Parodie抖音|TikTokmobiles Kurzvideoprojekt.Vue„Best Practices“ auf der mobilen Seite, vergleichbar mit NativeAppSeidiges und geschmeidiges Erlebnis. Habe das Neueste verwendetVueTechnologie-Stack, basierend aufVue3、Vite5、Piniaerreichen. Die Daten werden lokal im Projekt gespeichertaxios-mock-adapterDie Bibliothek fängt die API ab und gibt lokale JSON-Daten zurück, um echte Backend-Anfragen zu simulieren.

Online-Zugang

Github-Seiten:https://dy.ttentau.top/

Verknüpfung

[Imitation Douyin-Serie] 1:200 Codezeilen zur Implementierung einer Karussellkomponente ähnlich Swiper.js
[Imitation Douyin-Serie] 2:Verwirklichen Sie den „unendlich gleitenden Video“-Effekt auf Douyin
[Imitation Douyin-Serie] Drei:Einführung in die Verwendung des Vue-Routings und das Hinzufügen von Übergangsanimationen
[Imitation Douyin-Serie] Vier:Bedingtes Routen-Caching von Vue, genau wie bei herkömmlichen Nachrichtenseiten
[Imitation Douyin-Serie] Fünf:Github-Aktionen stellen Seiten bereit, synchronisieren mit Gitee, übersetzen README, packen Docker-Image

laufen

Hinweis: Dieses Projekt ist nur für Studien- und Forschungszwecke geeignet, nicht für die kommerzielle Nutzung

Schnelle Bereitstellung in Vercel

Auf Docker bereitstellen

bash
# 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

lokale Entwicklung

Hinweis: Der Git-Befehl muss geklont werden, damit er ausgeführt werden kann. Das Herunterladen des ZIP-Pakets ist nicht möglich. Wenn die Klongeschwindigkeit zu langsam ist, wird empfohlen, die Gitee-Adresse zu verwenden

bash
git clone https://gitee.com/zyronon/douyin.git (中国使用)
          https://github.com/zyronon/douyin.git 
cd douyin
npm install
npm run dev

Öffnen Sie Ihren Browser und besuchen Sie:http://127.0.0.1:3000

Hinweis: Sie müssen den Browser in den Mobilmodus schalten, indem Sie zuerst drückenF12Um die Konsole aufzurufen, drücken SieCtrl+Shift+Mum eine normale Vorschau anzuzeigen

Datenquellen

Das Video stammt von folgenden Douyin-Prominenten

Bild aus den öffentlichen Notizen von Xiaohongshu

Bei den oben genannten Inhalten handelt es sich um alle öffentlichen Informationen im Internet

Funktionen und Vorschläge

Das Projekt befindet sich derzeit in einem frühen Entwicklungsstadium und es werden kontinuierlich neue Funktionen hinzugefügt. Wenn Sie Funktionen oder Vorschläge für die Software haben, können Sie sich gerne an uns wenden.Issuesaufgewachsen in
Wenn Ihnen die Designideen dieser Software auch gefallen, reichen Sie sie bitte einPR, Vielen Dank für deine Unterstützung!

kontaktiere mich

Sie können meine E-Mail kontaktieren[email protected]

Teilen Sie meine anderen Open-Source-Projekte:

Wort eingeben- Software zum Auswendiglernen von Vokabeln, die im Internet verwendet werden kann
Webskripte- Einige nützliche Grease Monkey-Skripte ~

Vereinbarung

GPL

README.En (`docs/README.en.md`)

Douyin-Vue

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/

[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

bash
# 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

bash
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

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 email[email protected]

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~

agreement

GPL

README.Es (`docs/README.es.md`)

Douyin-Vue

douyin-vuees una parodia抖音|TikTokProyecto de vídeo corto móvil.Vue"Mejores prácticas" en el lado móvil, comparables a las nativasAppExperiencia sedosa y suave. Usado lo últimoVuepila de tecnología, basada enVue3、Vite5、Pinialograr. Los datos se guardan localmente en el proyecto a través deaxios-mock-adapterLa biblioteca intercepta la API y devuelve datos json locales para simular solicitudes de backend reales.

Acceso en linea

Páginas de Github:https://dy.ttentau.top/

Enlace

[Serie Imitación Douyin] 1:200 líneas de código para implementar un componente carrusel similar a Swiper.js
[Serie Imitación Douyin] 2:Realice el efecto de "vídeo deslizante infinito" en Douyin
[Serie Imitación Douyin] Tres:Vue 路由使用介绍以及添加转场动画
[Serie Imitación Douyin] Cuatro:Almacenamiento en caché de rutas condicionales de Vue, al igual que los sitios de noticias tradicionales
[Serie Imitación Douyin] Cinco:Github Actions implementa páginas, sincroniza con Gitee, traduce README, empaqueta la imagen de la ventana acoplable

correr

Nota: Este proyecto sólo es apto para estudio e investigación, no para uso comercial.

Implemente rápidamente en Vercel

Implementar en Docker

bash
# 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

desarrollo local

Nota: El comando git debe clonarse para ejecutarse. No se puede ejecutar la descarga del paquete zip. Si la velocidad de clonación es demasiado lenta, se recomienda utilizar la dirección del albergue

bash
git clone https://gitee.com/zyronon/douyin.git (中国使用)
          https://github.com/zyronon/douyin.git 
cd douyin
npm install
npm run dev

Abra su navegador y visite:http://127.0.0.1:3000

Nota: Debe cambiar el navegador al modo móvil, primero presioneF12Para abrir la consola, presioneCtrl+Shift+Mpara obtener una vista previa normalmente

Fuentes de datos

El video proviene de las siguientes celebridades de Douyin.

Imagen de las notas públicas de Xiaohongshu.

以上内容均是互联网公开信息

Funciones y sugerencias

El proyecto se encuentra actualmente en las primeras etapas de desarrollo y continuamente se agregan nuevas funciones. Si tiene alguna característica o sugerencia para el software, no dude en contactarnos.Issuescriado en
Si también le gustan las ideas de diseño de este software, envíelas.PR, ¡Muchas gracias por tu apoyo!

contáctame

Puedes contactar a mi correo[email protected]

Comparta mis otros proyectos de código abierto:

_Escribir palabra- Software de memorización de vocabulario que se puede utilizar en la web ~ _
Guiones web- Algunos scripts útiles de Grease Monkey~

acuerdo

GPL

README.Fr (`docs/README.fr.md`)

Douyin-Vue

douyin-vueest une parodie抖音|TikTokprojet de courte vidéo mobile.VueDes « bonnes pratiques » côté mobile, comparables au natifAppExpérience soyeuse et douce. Utilisé le dernierVuepile technologique, basée surVue3、Vite5、Piniaaccomplir. Les données sont enregistrées localement dans le projet viaaxios-mock-adapterLa bibliothèque intercepte l'API et renvoie des données json locales pour simuler de véritables requêtes backend.

Accès en ligne

Pages GitHub :https://dy.ttentau.top/

Lien

[Série Imitation Douyin] 1 :200 lignes de code pour implémenter un composant carrousel similaire à Swiper.js
[Série Imitation Douyin] 2 :Réaliser l'effet "vidéo coulissante infinie" sur Douyin
[Série Imitation Douyin] Trois :Introduction à l'utilisation du routage Vue et à l'ajout d'animations de transition
[Série Imitation Douyin] Quatre :Mise en cache des routes conditionnelles Vue, tout comme les sites d'information traditionnels
[Série Imitation Douyin] Cinq :Les actions Github déploient des pages, synchronisent avec Gitee, traduisent README, emballent l'image Docker

courir

Remarque : ce projet convient uniquement à l'étude et à la recherche, et non à un usage commercial.

Déployez rapidement sur Vercel

Déployer sur Docker

bash
# 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

développement local

Remarque : La commande git doit être clonée pour s'exécuter. Le téléchargement du package zip ne peut pas s'exécuter. Si la vitesse de clonage est trop lente, il est recommandé d'utiliser l'adresse du gîte

bash
git clone https://gitee.com/zyronon/douyin.git (中国使用)
          https://github.com/zyronon/douyin.git 
cd douyin
npm install
npm run dev

Ouvrez votre navigateur et visitez :http://127.0.0.1:3000

Remarque : Vous devez passer le navigateur en mode mobile, appuyez d'abord surF12Pour afficher la console, appuyez surCtrl+Shift+Mpour prévisualiser normalement

Les sources de données

La vidéo provient des célébrités Douyin suivantes

Photo tirée des notes publiques de Xiaohongshu

Le contenu ci-dessus est toute l'information publique sur Internet

Fonctionnalités et suggestions

Le projet en est actuellement aux premiers stades de développement et de nouvelles fonctionnalités sont ajoutées continuellement. Si vous avez des fonctionnalités ou des suggestions pour le logiciel, n'hésitez pas à nous contacter.Issuesélevé dans
Si vous aimez également les idées de conception de ce logiciel, veuillez le soumettrePR, Merci beaucoup pour votre soutient!

Contactez moi

Vous pouvez contacter mon email[email protected]

Partagez mes autres projets open source :

Taper un mot- Logiciel de mémorisation de vocabulaire utilisable sur le web~
Scripts Web- Quelques scripts Grease Monkey utiles ~

accord

GPL

README.Ja (`docs/README.ja.md`)

Douyin-Vue

douyin-vueパロディです抖音|TikTokモバイルショートビデオプロジェクト。Vueネイティブと同等のモバイル側の「ベスト プラクティス」Appシルキーで滑らかな使い心地。最新のものを使用しましたVueテクノロジースタック、に基づくVue3、Vite5、Pinia成し遂げる。データはプロジェクト内でローカルに保存されます。axios-mock-adapterライブラリは API をインターセプトし、ローカルの JSON データを返して、実際のバックエンド リクエストをシミュレートします。

オンラインアクセス

Github ページ:https://dy.ttentau.top/

リンク

【模倣同音シリーズ】 1:Swiper.js に似たカルーセル コンポーネントを実装するための 200 行のコード
【模倣同音シリーズ】 2：Douyinで「無限スライドビデオ」効果を実現
【模倣同音シリーズ】 3：Vue ルーティングの使用とトランジション アニメーションの追加の概要
【模倣同音シリーズ】 4：従来のニュースサイトと同様に、Vue の条件付きルート キャッシュ
【模倣同音シリーズ】 5：Github Actions ページのデプロイ、Gitee への同期、README の翻訳、Docker イメージのパッケージ化

実行

注: このプロジェクトは研究と研究のみに適しており、商業利用には適していません。

Vercel への迅速な導入

Dockerへのデプロイ

bash
# 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

地域開発

注: git コマンドを実行するには、クローンを作成する必要があります。zip パッケージのダウンロードは実行できません。クローン速度が遅すぎる場合は、gitee アドレスを使用することをお勧めします。

bash
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

注: ブラウザをモバイル モードに切り替える必要があります。最初に を押します。F12コンソールを表示するには、Ctrl+Shift+M を押します。通常にプレビューする

データソース

このビデオは以下のDouyinの有名人からのものです

小紅書公文書からの写真

上記内容は全てインターネット上の公開情報です

特徴と提案

プロジェクトは現在開発の初期段階にあり、ソフトウェアの新機能や提案があれば、お気軽にお問い合わせください。Issuesで育ちました
このソフトウェアのデザインアイデアも気に入っていただけましたら、ぜひ PR を送信してください、 ご支援ありがとうございました！

私に連絡して

私のメールアドレスにご連絡いただけます[email protected]

私の他のオープンソース プロジェクトを共有してください:

単語を入力する～Web上で使える単語暗記ソフト～
ウェブスクリプト- いくつかの便利な Grease Monkey スクリプト~

合意

GPL

--- METRICS ---

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#douyin Browse douyin catalog → #js Browse js catalog → #tiktok Browse tiktok catalog → #vue Browse vue catalog → #vue3 Browse vue3 catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →