[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8619":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":33,"discoverSource":34},8619,"douyin","zyronon\u002Fdouyin","zyronon"," Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 .  Imitate TikTok ，Vue Best practices on Mobile","https:\u002F\u002Fdy.2study.top\u002F",null,"Vue",11469,3097,71,22,0,8,33,2,45,"GNU General Public License v3.0",false,"master",true,[5,26,27,28,29],"js","tiktok","vue","vue3","2026-06-12 02:01:56","\u003Ch1 align=\"center\">\n  Douyin-Vue\n\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n \u003Ca href=\"docs\u002FREADME.en.md\">English\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.es.md\">Spanish\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.de.md\">German\u003C\u002Fa> | \n\u003Ca href=\"docs\u002FREADME.fr.md\">French\u003C\u002Fa> | \u003Ca href=\"README.md\">简体中文\u003C\u002Fa> |  \u003Ca href=\"docs\u002FREADME.ja.md\">日本語\u003C\u002Fa> \n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fzyronon\u002Fdouyin\u002Fblob\u002Fmaster\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fzyronon\u002Fdouyin\" alt=\"License\">\u003C\u002Fa>\n  \u003Ca>\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-brightgreen.svg\"\u002F>\u003C\u002Fa>\n  \u003Ca>\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPowered%20by-Vue-blue\"\u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fhellogithub.com\u002Frepository\u002Ff22d2c9ea1eb4826839084332f7519bd\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fabroad.hellogithub.com\u002Fv1\u002Fwidgets\u002Frecommend.svg?rid=f22d2c9ea1eb4826839084332f7519bd&claim_uid=k5e4ZAqRjJEGzCW&theme=small\" alt=\"Featured｜HelloGitHub\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp> \n\n\u003Cdiv align=center>\n\u003Ca href=\"https:\u002F\u002Ftrendshift.io\u002Frepositories\u002F9068\" target=\"_blank\" class=\"trendshift-badge\">\u003Cimg src=\"https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F9068\" alt=\"Douyin | Trendshift\" style=\"width: 250px; height: 55px;\" width=\"250\" height=\"55\"\u002F>\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n`douyin-vue` 是一个模仿 `抖音|TikTok` 的移动端短视频项目。`Vue` 在移动端的\"最佳实践\"，媲美原生 `App` 丝滑流畅的使用体验。使用了最新的 `Vue` 技术栈，基于 [`Vue3`](https:\u002F\u002Fcn.vuejs.org\u002F)、[`Vite5`](https:\u002F\u002Fcn.vitejs.dev\u002F)\n、[`Pinia`](https:\u002F\u002Fpinia.vuejs.org\u002F)实现。数据保存在项目本地，通过 [`axios-mock-adapter`](https:\u002F\u002Fgithub.com\u002Fctimmerm\u002Faxios-mock-adapter) 库拦截Api 并返回本地json数据，模拟真实后端请求\n\n\n\u003Cdiv>\n\u003Cimg width=\"150px\" src='docs\u002Fimgs\u002F1.gif' \u002F>\n\u003Cimg width=\"150px\" src='docs\u002Fimgs\u002F2.gif' \u002F>\n\u003Cimg width=\"150px\" src='docs\u002Fimgs\u002F3.gif' \u002F>\n\u003Cimg width=\"150px\" src='docs\u002Fimgs\u002F4.gif' \u002F>\n\u003Cimg width=\"150px\" src='docs\u002Fimgs\u002F5.gif' \u002F>\n\u003C\u002Fdiv>\n\n## 在线访问\n \nGithub Pages: [https:\u002F\u002Fdy.2study.top\u002F](https:\u002F\u002Fdy.2study.top\u002F)  \n\n[\u002F\u002F]: # (Gitee pages: [https:\u002F\u002Fdy.ttentau.top\u002F](https:\u002F\u002Fdy.ttentau.top\u002F) (中国地区推荐访问这个地址)  )\n[\u002F\u002F]: # (Github pages: [https:\u002F\u002Fzyronon.github.io\u002Fdouyin\u002F](https:\u002F\u002Fzyronon.github.io\u002Fdouyin\u002F)  )\n[\u002F\u002F]: # (Netlify: [https:\u002F\u002Fdouyins.netlify.app\u002F](https:\u002F\u002Fdouyins.netlify.app\u002F))\n[\u002F\u002F]: # (Vercel:  [https:\u002F\u002Fdouyins.vercel.app](https:\u002F\u002Fdouyins.vercel.app))\n[\u002F\u002F]: # (Android Apk: https:\u002F\u002Fgithub.com\u002Fzyronon\u002Fdouyin\u002Freleases)\n[\u002F\u002F]: # (**注意**：`PC` 必须将浏览器切到手机模式，先按 `F12` 调出控制台，再按 `Ctrl+Shift+M`才能正常预览)\n[\u002F\u002F]: # (**注意**：手机请用  [Via 浏览器](https:\u002F\u002Fviayoo.com\u002Fzh-cn\u002F)  或 Chrome 浏览器预览。其它浏览器可能会强制将视频全屏，导致无法正常显示)\n\n## 链接\n\n【模仿抖音系列】一：[200行代码实现类似Swiper.js的轮播组件](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7360512664317018146)  \n【模仿抖音系列】二：[实现抖音 “视频无限滑动“效果](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7361614921519054883)  \n【模仿抖音系列】三：[Vue 路由使用介绍以及添加转场动画](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7362528152777130025)  \n【模仿抖音系列】四：[Vue 有条件路由缓存，就像传统新闻网站一样](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7365334891473240101)  \n【模仿抖音系列】五：[Github Actions 部署 Pages、同步到 Gitee、翻译 README 、 打包 docker 镜像](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7365757742381957161)  \n【模仿抖音系列】六：[使用rem、动态vh自适应移动端](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7374452765273538595)\n\n## 运行\n注意：本项目仅适用于学习和研究，不得用于商业使用\n\n### 快速部署至 Vercel\n\n[![Deploy with Vercel](https:\u002F\u002Fvercel.com\u002Fbutton)](https:\u002F\u002Fvercel.com\u002Fnew\u002Fclone?repository-url=https:\u002F\u002Fgithub.com\u002Fzyronon\u002Fdouyin)\n\n### 部署到 Docker\n```bash\n# pull Docker image\ndocker pull ghcr.io\u002Fzyronon\u002Fdouyin-vue:latest\n\n# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io\u002Fzyronon\u002Fdouyin-vue:latest\ndocker run -d -p 80:80 ghcr.io\u002Fzyronon\u002Fdouyin-vue:latest\n```\n### 本地开发\n**注意：必须 git 命令 clone 下来才能运行，下载 zip 包是无法运行的。如果 clone 速度太慢，推荐使用 gitee 地址**\n\n```bash\ngit clone https:\u002F\u002Fgitee.com\u002Fzyronon\u002Fdouyin.git (中国使用)\n          https:\u002F\u002Fgithub.com\u002Fzyronon\u002Fdouyin.git \ncd douyin\nnpm install\nnpm run dev\n```\n\n打开浏览器并访问: [http:\u002F\u002F127.0.0.1:3000](http:\u002F\u002F127.0.0.1:3000)\n\n**注意：需要将浏览器切至手机模式，先按 `F12` 调出控制台，再按 `Ctrl+Shift+M` 才能正常预览**\n\n## 数据来源\n\n视频来源于以下抖音网红\n\n- `我是香秀 🐂🍺`: [https:\u002F\u002Fv.douyin.com\u002FiYRAPA2L\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAPA2L\u002F)\n- `杨老虎 🐯（磕穿下巴掉牙版）`: [https:\u002F\u002Fv.douyin.com\u002FiYRA56de\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRA56de\u002F)\n- `条子`: [https:\u002F\u002Fv.douyin.com\u002FiYRAaqjr\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAaqjr\u002F)\n- `达莎 Digi`：[https:\u002F\u002Fv.douyin.com\u002FiYRA6rwT\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRA6rwT\u002F)\n- `小橙子`: [https:\u002F\u002Fv.douyin.com\u002FiYRAnudw\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAnudw\u002F)\n- `南恬`: [https:\u002F\u002Fv.douyin.com\u002FiYRAbKm3\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAbKm3\u002F)\n- `小霸宠牛排 🥩`：[https:\u002F\u002Fv.douyin.com\u002FiYRSosVB\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRSosVB\u002F)\n- `奶茶妹 ◕🌱`: [https:\u002F\u002Fv.douyin.com\u002FiYRACKhP\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRACKhP\u002F)\n- `我才是岚岚`: [https:\u002F\u002Fv.douyin.com\u002FiYRAQM1C\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAQM1C\u002F)\n- `周憬艺 ziran`: [https:\u002F\u002Fv.douyin.com\u002FiYRAQs4h\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAQs4h\u002F)\n- `刘思瑶 nice`: [https:\u002F\u002Fv.douyin.com\u002FiYRAaERn\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAaERn\u002F)\n- `彭十六 elf`: [https:\u002F\u002Fv.douyin.com\u002FiYRAHrVG\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRAHrVG\u002F)\n- `李子柒`: [https:\u002F\u002Fv.douyin.com\u002FiYRA5B88\u002F](https:\u002F\u002Fv.douyin.com\u002FiYRA5B88\u002F)\n\n图片来自于小红书公开笔记\n\n以上内容均是互联网公开信息\n\n\n## 功能与建议\n\n目前项目处于开发初期，新功能正在持续添加中，如果你对软件有任何功能与建议，欢迎在 `Issues` 中提出\n如果你也喜欢本软件的设计思想，欢迎提交 `PR`，非常感谢你对我们的支持！\n\n## 联系我\n\n您可以联系我的邮箱 \u003Ca href=\"mailto:zyronon@163.com\">zyronon@163.com\u003C\u002Fa>\n> 分享我其他开源项目：\n>\n>_[**Typing Word\n** - 可在网页上使用的背单词软件~](https:\u002F\u002Fgithub.com\u002Fzyronon\u002Ftyping-word) \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fzyronon\u002Ftyping-word.svg?style=flat-square&label=Star&color=4285dd&logo=github\" height=\"16px\" \u002F>_  \n> _[**Web Scripts\n** - 一些好用的油猴脚本~](https:\u002F\u002Fgithub.com\u002Fzyronon\u002Fweb-scripts) \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fzyronon\u002Fweb-scripts.svg?style=flat-square&label=Star&color=4285dd&logo=github\" height=\"16px\" \u002F>_\n\n## 许可协议\n\n[GPL](LICENSE)\n","douyin-vue 是一个模仿抖音或TikTok的移动端短视频项目，旨在展示Vue在移动应用开发中的最佳实践。该项目采用了最新的前端技术栈，包括 Vue3、Vite5 和 Pinia，以实现流畅的用户体验。它通过 axios-mock-adapter 模拟后端API请求，使得开发者可以专注于前端逻辑而无需实际部署后端服务。此项目非常适合于希望学习如何使用现代Vue技术构建高性能、响应式移动网页应用的前端开发者，同时也为那些想要了解如何模仿流行社交媒体平台功能的人提供了一个很好的参考案例。注意，本项目仅供学习和研究用途，不应用于商业目的。","2026-06-11 03:18:57","top_language"]