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

news2024/9/28 5:23:41

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.coloradmin.cn/o/1914230.html

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

相关文章

【Hec-HMS】第一期:模型简介及软件安装

HEC-HMS模型简介及软件安装 HEC-HMS模型简介建模思路 HEC-HMS软件安装步骤1:安装InstallShield Wizard步骤2:安装HEC-HMS 参考 HEC-HMS模型简介 HEC-HMS(The Hydrologic Engineering Center’s-Hydrologic Modelimng System),美国陆军工程兵…

邮件推送服务的自动化流程设置与优化技巧?

邮件推送服务如何定制化?邮件推送的安全性如何保障? 无论是大型企业还是小型企业,通过精准的邮件推送服务,可以实现客户关系管理的有效增强,提升品牌认知度和销售转化率。AokSend将探讨如何通过自动化流程设置与优化技…

路径规划 | 基于蚁群算法的三维无人机航迹规划(Matlab)

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 基于蚁群算法的三维无人机航迹规划(Matlab)。 蚁群算法(Ant Colony Optimization,ACO)是一种模拟蚂蚁觅食行为的启发式算法。该算法通过模拟蚂蚁在寻找食物时…

【MPPT太阳能升压控制器方案】远翔升压恒流驱动芯片FP7209单节电池升压24V,30V,36V,42V,48V全系列方案,高转换效率,输出带短路保护功能

高转换效率,太阳能控制器方案——详解太阳能控制器PWM / MPPT极简方案其设计要点,升压30V,36V,42V,48V 使用单颗芯片FP7209即实现两级升压到30V,36V,42V,48V,相对于单极升…

Milvus核心组件(1)

cluster 模式 上一篇其实已经说过 standalone 模式,其实集群模式大同小异,只是在不同机子间使用Kafka或者其他消息中间件保证数据及逻辑的一致性。 Log Broker,如Pulsar这样的系统,是专门设计来处理和管理日志数据的中间件。它主…

windows10开启防火墙,增加入站规则后不生效,还是不能访问后端程序

一、背景: 公司护网要求开启防火墙,开启防火墙后,前后端分离的项目调试受影响,于是增加入站规则开放固定的后台服务端口,增加的mysql端口3306和redis端口6379,别人都可以访问,但是程序的端口808…

AMEYA360:国民技术推出多款高能专用MCU产品

2024年7月8日,国民技术推出多款高能专用MCU产品。N32H482(通用控制)、N32H487(高性能互联)、N32GH473(电机控制)、N32H474(数字电源控制)四大系列高性能MCU新品,以及基于Arm Cortex M0内核实现的N32G052系列高性价比通用MCU新品。 全新一代高性能MCU新品…

JavaSE 面向对象程序设计进阶 IO流 字符输入输出流及底层原理

目录 字符输入流FileReader 空参的read方法 带参的read方法 字符输出流FileWriter 字符输入流底层原理 字符输出流底层原理 字符输入流FileReader 输入流 一次读一个字节 遇到中文时 一次读多个字节 输出流 底层会把数据按照指定的编码方式进行编码 在变成直接写到文件当…

企业化运维(7)_Zabbix企业级监控平台

官网:Zabbix :: The Enterprise-Class Open Source Network Monitoring Solution ###1.Zabbix部署### (1)zabbix安装 安装源 修改安装路径为清华镜像 [rootserver1 zabbix]# cd /etc/yum.repos.d/ [rootserver1 yum.repos.d]# vim zabbix.r…

SAP与易链SRM系统集成案例

一、项目环境 重庆润通控股(集团)有限公司成立于2007年,是一家集合汽柴油动力及终端、摩托车、储能电源、汽车零部件、金融服务等产业的多元化集团公司。现拥有员工超4000人,业务遍布全球80多个国家及地区,2021年营…

CDGA|数据治理:如何建立健全数据伦理和隐私保护机制?

随着数字化时代的到来,数据已成为推动社会进步和企业发展的重要资源。然而,随之而来的数据伦理和隐私保护问题也日益凸显。建立健全的数据治理体系,特别是强化数据伦理和隐私保护机制,已成为当务之急。 数据治理的重要性 数据治理…

GeoServer property 表达式注入代码执行漏洞(CVE-2024-36401)

GeoServer property 表达式注入代码执行漏洞(CVE-2024-36401) 1.漏洞描述 GeoServer 是一个开源的服务器软件,使用 Java 编写,主要功能是允许用户共享和编辑地理空间数据。它在设计时就考虑到了互操作性,支持使用开放标准来发布多种主流格式…

从新手到高手:Scala函数式编程完全指南,Scala IF…ELSE 语句(8)

1、Scala IF…ELSE 语句 Scala IF…ELSE 语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块。 可以通过下图来简单了解条件语句的执行过程: 1.1、if 语句 if 语句有布尔表达式及之后的语句块组成。 语法 if 语句的语法格式如下&…

After Detailer让图像自动修复

After Detailer(简称adetailer)是一个Stable Diffusion的自动Web-UI扩展,它能够自动化修复图像中的不完整部分,例如模糊的人脸等常见问题。在这篇文章中,你将了解它的工作原理、如何使用它,以及一些常见的使…

@RequestPart 与 @RequestBody、@RequestParam 注解的异同点

前言 RequestPart 注解是我们在JavaEE 开发中,比较常见的一个注解。它经常会与 RequestBody 、RequestParam 注解进行比较,这篇博文我们以案例和源码相结合,分析这几个注解的异同点。 案例演示 创建实体类 User Data NoArgsConstructor A…

图片海报怎么做成二维码展示?二维码分享图片的制作技巧

怎么把图片的宣传海报做成二维码呢?在做活动或者产品宣传时,都会制作精美的图片海报,除了打印传单或者制作展板的方式来展示外,将海报图片生成二维码,通过分享二维码来实现图片海报的快速传播,能够有效提升…

[数据结构] 基于插入的排序 插入排序希尔排序

标题:[数据结构] 排序#插入排序&希尔排序 水墨不写bug 目录 (一)插入排序 实现思路: 插入排序实现: (二)希尔排序 希尔排序的基本思想: 希尔排序的实现: 正…

【转】-java多线程读写锁ReadWriteLock

Java多线程中读写锁ReadWriteLock的使用 该博客转载自​**lavimer​的​Java多线程中读写锁ReadWriteLock的使用** 1. 概念 读写锁分为读锁和写锁,多个读锁之间是不需要互斥的(读操作不会改变数据,如果上了锁,反而会影响效率),…

IPXProxy海外代理IP在MultiLogin指纹浏览器中的配置教程

Multilogin指纹浏览器是一款付费浏览器,它为用户提供了拥有多个虚拟浏览器配置文件的机会。作为最好的指纹浏览器之一,它常常被用来创建或管理多个账户,当然在这个过程,代理IP是不可或缺的一部分。下面给大家代理在MultiLogin指纹…

【企业级监控】Docker部署Zabbix与监控主机

基于Docker部署Zabbix6.2 文章目录 基于Docker部署Zabbix6.2资源列表基础环境一、首先安装Docker1.1、部署Docker1.2、配置Docker加速器 二、部署Zabbix组件介绍三、部署Zabbix3.1、安装数据库容器3.2、安装zabbix-java-gateway3.3、安装zabbix-server3.4、安装zabbix-web界面3…