使用Vue3、Pinia和Vite5打造高度还原的抖音仿制项目

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

在线预览:Douyin (riseforever.cn)

开源地址:kejiyuzhe/douyin (github.com)

原版地址:zyronon/douyin: Vue3 + Pinia 仿抖音,Vue 在移动端的最佳实践 . Imitate TikTok ,Vue Best practices on Mobile (github.com)

开源类型:GPL-3.0 license

007943c86ee9a5f7af6bb9ca6a040b59

开发指南

快速部署至 Vercel

部署到 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

本地开发

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

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 才能正常预览

博主的推荐

使用Vercel的时候会遇到无法访问的问题,此时只需要一个“路明二级域名分发 - 免费稳定的二级域名分发服务 (kmyl.top)”即可。

不会注册的看《免费的二级域名分发,您确定不要试试吗?-科技语者 (chgskj.cn)》在这里就不详细的说了

5d08aef457d70445825c0c7829366451

f4b16db1dfc5458b212e53267f25b3db

ca7f2d3a4f1e1b3b0836f17dba7ab107

cd7c96892563d642061b2b9ef54c0ce3

然后等待他解析完(预计1~3分钟)即可在国内访问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/789904.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何将heic格式转换jpg?四种将heic转换成jpg的方法!

如何将heic格式转换jpg?在现今的数字图像处理领域,Heic格式作为一种被吹捧的创新型图像格式,以其先进的压缩技术,迅速减小了图片文件的大小,然而,尽管其有许多优点,实际使用中Heic格式却带来了一…

视频解码故障案例两则

案例1 绿边 故障分析: 这个能明显看到视频上方出现绿色半透明边带。这说明Y数据正常。UV数据不正常。 它显然与视频帧的垂直分辨率设置有关。 UV数据和Y数据是连续放置的,如果上方出现彩色数据失调,说明这部分数据实际仍然是Y数据。也就是…

ROM修改进阶教程------深度解析小米设备锁机型不解锁bl 刷写特殊类固件的步骤

在玩机过程中会遇到很多自己机型忘记密码或者手机号不用导致机型出现账号锁。无法正常使用。那么此类机型如果无法正常售后解锁。只能通过第三方渠道。例如在早期小米机型有强解bl锁资源。然后刷入完美解锁包。这种可以登陆新账号。但后期新机型只能通过修改分区来屏蔽原设备锁…

STM32智能机器人手臂控制系统教程

目录 引言环境准备智能机器人手臂控制系统基础代码实现:实现智能机器人手臂控制系统 4.1 数据采集模块 4.2 数据处理与控制算法 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:机器人手臂管理与优化问题解决方案与优化收尾与总结 1. 引言 …

绝区零启动遇到的问题

📑打牌 : da pai ge的个人主页 🌤️个人专栏 : da pai ge的博客专栏 ☁️宝剑锋从磨砺出,梅花香自苦寒来 ​ 绝区零》作为米哈游的一款全新都…

4-1 文本预处理:分词、停用词、特殊字符消失术

4-1 文本预处理:分词、停用词、特殊字符消失术 在自然语言处理(NLP)领域,文本预处理是不可或缺的一步。有效的文本预处理能够显著提高模型的性能和准确性。本文将详细介绍文本预处理中的三个重要步骤:分词、停用词处理…

NPDP含金量高吗?什么人适合学习NPDP?

PMP考完了,最近在考NPDP,这也是一个有意思的证书,含金量还不错,非常适合想转型和升级的人来考。 一、NPDP是什么 NPDP其实就是产品经理国际资格认证(New Product Development Professional),是…

怎么提高音频声音大小?提高音频声音大小的四种方法

怎么提高音频声音大小?在音频处理和编辑中,增加声音的音量是一个常见的需求,尤其是在确保音频清晰度和听觉效果的同时。调整音频的音量不仅仅是简单地提高音频的响度,它也涉及到如何保持音质的高标准,确保没有失真或削…

视频调色的技巧和方法 视频调色的操作步骤 视频调色用什么软件好免费 会声会影下载免费中文版

学会视频调色,就等于掌握了剪辑艺术的密码。视频调色不是为了画面好看,而是通过精心构思的色彩参数,向观众传达作品的情绪和内涵。普通剪辑师与剪辑高手之间的差距,就在于能否领悟视频调色的真谛。 一、视频调色有什么用 掌握混…

Pandas基础03:数据排序与增删

上一节我们介绍了通过按行索引和按列索引找出相关数据的方法。本章节将进一步介绍如何筛选数据,并对数据进行排序、增删的方法。 示例表格和上一节相同。 1.数据筛选 Python中可以通过区域筛选,即获取某几行某几列的方法得到数据。例如,我要…

伙伴活动|AI硬件大潮来袭,深圳的创客们在哪里?

「每一种硬件产品,都会被 GenAI 重新做一遍。」 分享一个社区伙伴「未来光锥」参与主办的活动。如果你同时对 AI 和硬件感兴趣,提到 maker 一词仍然会激动。推荐你参与这次活动。 AI 玩具Folotoy 的创始人、RTE 开发者社区成员王乐也将参与本次活动并分…

python怎么判断字符串以什么结尾

在python编辑器中新建一个data.py。 写上自己的注释。 然后新建一个变量testname。 利用endswith来判断字符串是不是以“ar”结尾。 将结果打印出来。 选择“run”->“run”。 运行该程序,如果是,就会返回true。

Xinstall揭秘:APP推广数据背后的真相,让你的营销更精准!

在这个移动互联网时代,APP如同雨后春笋般涌现,但如何在这片红海中脱颖而出,成为每一个开发者与运营者面临的共同难题。其中,APP推广统计作为衡量营销效果、优化推广策略的关键环节,更是不可忽视的一环。今天&#xff0…

【昇思25天学习打卡营打卡指南-第二十二天】GAN图像生成

GAN图像生成 模型简介 生成式对抗网络(Generative Adversarial Networks,GAN)是一种生成式机器学习模型,是近年来复杂分布上无监督学习最具前景的方法之一。 最初,GAN由Ian J. Goodfellow于2014年发明,并在论文Generative Adve…

机器学习和AI智能写作对未来文案编辑的影响

欢迎关注小知:知孤云出岫 目录 机器学习和AI智能写作对未来文案编辑的影响1. 简介2. AI智能写作工具的现状3. AI智能写作的优势3.1 提高效率3.2 降低成本3.3 数据驱动的个性化 4. AI智能写作的挑战4.1 创造力和独创性4.2 道德和伦理问题4.3 技术限制 5. 行业变化5.…

鸿蒙开发:每天一个小bug----鸿蒙开发路由跳转踩坑

一、前言 报错内容显示找不到页面 ,肯定我们页面没写对呗! 可能是这几个原因:1.main_pages.json没配置路由 {"src": ["pages/02/UserInfoClass","pages/02/AppStorageCase02"] } 2.跳转路径没写对 错误:…

首次使用DevEcoStudio

1、双击桌面快捷方式,进入首次运行的欢迎页面 由于咱们之前电脑上没有安装过此软件,所以直接保持默认选项不导入配置,然后点击🆗 2、进入到欢迎界面,勾选同意后点击Agree 3、进入到工具正式页面 4、点击右侧界面中的C…

【js】js高精度加减乘除函数

加法 /*** 高精度加法函数,处理字符串或数字输入,去除尾部多余的零* param {string|number} a - 被加数* param {string|number} b - 加数* returns {string} - 计算结果,去除尾部多余的零*/ export const add (a, b) > {// 将输入转换为…

AirPods Pro新功能前瞻:iOS 18的五大创新亮点

随着科技的不断进步,苹果公司一直在探索如何通过创新提升用户体验。iOS 18的推出,不仅仅是iPhone的一次系统更新,更是苹果生态链中重要一环——AirPods Pro的一次重大升级。 据悉,iOS 18将为AirPods Pro带来五项新功能&#xff0…

985研究生8年终毕业,学位证颁发11天后被作废?

“正常是学校颁证给学院,但学院就没告诉我,还把学校颁发的证书给撤销了,这中间学院并没有书面或电话告知我本人。”34岁读研,如今已42岁的内蒙古任女士回想起求学不易,很是心酸。 2015年3月,任女士考取2015…