使用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分钟)即可在国内访问。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

参数手册 : PXIe-1095

PXIe-1095 起售价 RMB 97,950.00 产品详细信息 PXI机箱类型: PXIe 机箱电源类型: 交流 混合插槽数量: 5 PXI Express插槽数量: 11 冗余硬件选项: 是 最大系统带宽: 24 GB/s 插槽数量: 18 PXI插槽数量: 0 系统定时插槽: 是 槽冷却能力: 82 瓦 简介 PXIe,18槽&am…

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证 通过在元素中使用属性的方法,该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…

一文清晰了解CSS

一、基本概念 1.定义 CSS(Cascading Style Sheets,层叠样式表),前面说了CSS是一种用于描述网页内容外观和样式的标记语言。 具体地,它通过选择器将样式规则应用到HTML元素上,控制网页的布局、颜色、字体等…

揭秘“消费即赚”的循环购模式

大家好,我是吴军,今天我将带您深入探索一种颠覆传统的新型商业模式——循环购模式。在这个模式中,消费者不仅能享受到购物的乐趣,还能通过消费获得实实在在的回报,甚至实现“边消费边赚钱”的奇妙体验。您是否好奇&…

通过函数来实现复数相加

在之前的的文章中介绍过函数重载,已经接触到重载(overloading)这个名词。所谓重载,就是重新赋予新的含义。函数重载就是对一个已有的函数赋予新的含义,使之实现新的功能。因此,同一个函数名就可以用来代表不…

若依 ruoyi-vue SpringBoot highlight-textarea 输入框敏感词关键词高亮标红(二)

参考文章,非常感谢大佬的分享 实现可高亮的输入框 — HighlightTextarea GitHub:highlight-textarea 可看作者上一篇文章 若依 ruoyi-vue SpringBoot聊天敏感词过滤sensitive-word(一) 效果图 审核时,输入框高亮敏感词&#xff…

变阻器的分类

变阻器作为用于调节电路中电阻值的电子元件,在电子电路中具有广泛的应用。根据不同的工作原理和结构形式,变阻器可以分为多种类型。以下是对变阻器分类的详细阐述: 一、按工作原理分类 电位器是一种通过滑动端位置调节电阻值的变阻器&#x…

Noah-MP陆面生态水文模拟与多源遥感数据同化

陆面模型在生态水文研究中的地位和作用;熟悉模型的发展历程,常见模型及各自特点;理解Noah-MP模型的原理,掌握Noah-MP模型在单站和区域的模拟、模拟结果的输出和后续分析及可视化等方法;课程还将深入讲解数据同化的原理…

1区老牌神刊,仅37天录用!网友:“这审稿速度救了我一条命”!

关注GZH【欧亚科睿学术】,GET完整版2023JCR分区列表! ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 期刊信息概况 【期刊类型】计算机科学类SCIE&EI 【出版社】ELSEVIER出版社 【期刊概况】IF:4.0-5.0,JCR1区,中科院3区…

电脑文件xinput1_3.dll丢失要怎么修复win10?一键解决xinput1_3.dll丢失的方法

电脑文件xinput1_3.dll丢失要怎么修复win10?其实无论是哪种系统,是不是win10其修复方法都是大同小异,不过在修复xinput1_3.dll文件之前,首先我们要先了解这个xinput1_3.dll文件,只有了解了,那么才可以快速的…

奇瑞新能源车型EQ2在驾校领域的CAN总线数据应用

在当今这个快速发展的汽车时代,科技的进步不仅推动了汽车性能的提升,也为驾驶培训领域带来了革命性的变化。其中,奇瑞EQ2作为一款电动汽车,其在驾校领域的应用尤其值得关注,特别是其采用的CAN总线技术。CAN总线&#x…

【productj服务导出文件503问题】

设备服务只要导出文件,就报503,查看K8S发现服务重启 1. 复现问题1.1 问题复现频繁fullGC 宿主pod服务日志监控1.2 小内存复现 接口没啥问题,导出就会导致服务重启 1. 复现问题 当前uat环境配置: pod内存:2G JVM参数&a…

Python 利用pandas处理CSV文件(DataFrame的基础用法)

前面介绍过通过Python标准库中的CSV模块处理CSV文件: Python 利用CSV模块处理数据 相比CSV模块,pandas的功能更加强大,本文将简单介绍如何通过pandas来处理CSV文件。 文章目录 一、pandas简介二、用法示例2.1 读取CSV文件2.1.1 read_csv参数…

现代化3D Web轻量引擎HOOPS Communicator:基于ESM的代码库转型!

HOOPS Communicator自2024.2.0版本起,向基于ECMAScript Modules (ESM)的系统迁移的决策和技术细节。文章分析了这一转型对代码组织、封装、依赖管理、性能以及与现代JavaScript开发实践兼容性的积极影响,并讨论了IIFE和UMD的兼容性支持。 引言 随着Jav…

聊聊springboot项目如何利用jmh来进行基准测试

前言 1、什么是JMH JMH(Java Microbenchmark Harness)是由OpenJDK团队开发的一个用于Java微基准测试工具套件,主要是基于方法层面的基准测试,精度可以达到纳秒级。它提供了一种标准、可靠且可重复的方式来衡量Java代码的性能&…

【深度学习(42)】通过vscode使用anaconda的python环境

按ctrlshiftp,选择Python:Select Interpreter 选择anaconda下的python虚拟环境

大模型备案全网最详细流程说明【附附件】

下图为最新的直至第五批深度合成服务算法备案信息的公告 根据目前公开的国内大模型算法备案统计来看,首批境内深度合成服务算法备案清单,总共通过了五批。 以第二批举例,境内深度合成服务算法备案清单,总共通过110家&…

Python的异常处理(与C++对比学习)

一、C语言中错误的处理方式 用assert来判断一个表达式是否出错;在调用接口函数时,接口函数会设置errno,我们可以通过errno,strerror(errno)来拿到错误码和错误信息。在自定义函数中,我们设置函数错误信息处理的时候&a…

告别堆积,迎接清新:回收小程序,打造无废生活新选择

在快节奏的现代生活中,物质的丰富与便利似乎成为了我们日常的一部分,但随之而来的,是日益增长的废弃物堆积问题。街道边、社区里,甚至是我们的家中,废弃物品仿佛无孔不入,逐渐侵蚀着我们的生活空间与环境质…

基于Netty的自研流系统缓存实现挑战: 内存碎片与OOM困境

01 前言 Kafka 作为流处理平台,在实时流计算和在线业务场景,追尾读追求端到端低延迟。在离线批处理和削峰填谷场景,数据冷读追求高吞吐。两个场景都需要很好的数据缓存设计来支撑,Apache Kafka 的数据存储在本地文件&#xff0c…