用Vue仿了一个类似抖音的App
大家好,我是 Java陈序员。
今天,给大家介绍一个基于 Vue3 实现的高仿抖音开源项目。
关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。
项目介绍
douyin —— 一个基于 Vue、Vite 实现,模仿抖音的移动端短视频项目。

这个项目的作者原本是用来学习 Vue 练手的,经过不断的优化更新,目前已经达到官方 App 的 80% 了。真乃我辈楷模!

项目地址:
https://github.com/zyronon/douyin
在线访问:
https://dy.ttentau.top/home
如果是 PC 浏览器浏览访问,请用手机模式。先按
F12调出控制台,再按Ctrl + Shift + M切换到手机模式。
项目截图





PS:大家都知道视频中的网红是谁嘛?
本地部署
环境准备: 该项目是基于 Vue 开发的,需要 Node 环境来运行。
1、安装 NodeJS,参考官方文档
2、安装 pnpm 包管理工具
npm install -g pnpm
3、拉取项目代码
git clone https://github.com/zyronon/douyin.git
4、进入项目根目录并安装依赖
cd douyin
pnpm install
5、启动项目
pnpm run dev
6、浏览器访问
http://localhost:3000
最后
推荐的开源项目已经收录到 GitHub 项目,欢迎 Star:
https://github.com/chenyl8848/great-open-source-project
或者访问网站,进行在线浏览:
https://chencoding.top:8090/#/
大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!
相关文章:
用Vue仿了一个类似抖音的App
大家好,我是 Java陈序员。 今天,给大家介绍一个基于 Vue3 实现的高仿抖音开源项目。 关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 douyin —— 一个基于 Vue、Vite 实…...
HarmonyOS 应用开发之非线性容器
非线性容器实现能快速查找的数据结构,其底层通过hash或者红黑树实现,包括HashMap、HashSet、TreeMap、TreeSet、LightWeightMap、LightWeightSet、PlainArray七种。非线性容器中的key及value的类型均满足ECMA标准。 HashMap HashMap 可用来存储具有关联…...
Golang Context是什么
一、这篇文章我们简要讨论Golang的Context有什么用 1、首先说一下Context的基本作用,然后在讨论他的实现 (1)数据传递,子Context只能看到自己的和父Context的数据,子Context是不能看到孙Context添加的数据。 (2)父子协程的协同,比…...
算法基础--递推
😀前言 递推算法在计算机科学中扮演着重要的角色。通过递推,我们可以根据已知的初始条件,通过一定的规则推导出后续的结果,从而解决各种实际问题。本文将介绍递推算法的基础知识,并通过一些入门例题来帮助读者更好地理…...
超市销售数据-python数据分析项目
Python数据分析项目-基于Python的销售数据分析项目 文章目录 Python数据分析项目-基于Python的销售数据分析项目项目介绍数据分析结果导出数据查阅 数据分析内容哪些类别比较畅销?哪些商品比较畅销?不同门店的销售额占比哪个时间段是超市的客流高封期?查看源数据类型计算本月…...
java实现手机号,密码,游邮箱 , 验证码的正则匹配工具类
先定义一个抽象类RegexPatterns,定义相关正则字符串 : public abstract class RegexPatterns {/*** 手机号正则*/public static final String PHONE_REGEX "^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\\d{8}$";/*** 邮箱正则*/public stat…...
java中的Arrays类的常用操作
Arrays类位于 java.util 包中,主要包含了操作数组的各种方法。 import java.util.Arrays; Arrays.sort(arr); int index Arrays.binarySearch(arr, 3); boolean isEqual Arrays.equals(arr1, arr2); // isEqual为true int[] arrnew int[5]; Arrays.fill(arr, 7)…...
回溯算法|78.子集
力扣题目链接 class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(vector<int>& nums, int startIndex) {result.push_back(path); // 收集子集,要放在终止添加的上面,否则会漏掉自…...
VC++、GCC、CLANG,INT128有符号整数编译器关键字
注意INT128为目标平台扩展关键字,不属于C/C语言本身支持特性,每个C/C编译器平台支持上都略有不同,甚至不支持。 可以详细参考本人此篇文章: GUN C/C (GCC/CLANG) 对于 __int128_t (128位有符号大整数的扩展支持平台限…...
用于HUD平视显示器的控制芯片:S2D13V40
一款利用汽车抬头显示技术用于HUD平视显示器的控制芯片:S2D13V40。HUD的全称是Head Up Display,即平视显示器,以前应用于军用飞机上,旨在降低飞行员需要低头查看仪表的频率。起初,HUD通过光学原理,将驾驶相关的信息投射…...
JSP使用模板字符串数据不能渲染的问题
entrap father 的 rubbish JSP 数据不能直接渲染,要从接口请求后去拼接结构 然后模板字符串不能直接用 用以下方法是不能渲染出数据的 let div <div class"circulation"><div class"list"><div class"left"><div class&qu…...
AI音乐GPT时刻来临:Suno 快速入门手册!
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...
数字乡村发展蓝图:科技赋能农村实现全面振兴
目录 一、数字乡村发展蓝图的内涵与目标 二、科技赋能农村:数字乡村发展的动力与路径 (一)加强农业科技创新,提升农业生产效率 (二)推进农村电商发展,拓宽农民增收渠道 (三&…...
Day42 动态规划 part04
Day42 动态规划 part04 46. 携带研究材料(卡哥的卡码网的题目) 背包问题 我的思路: 写不了一点儿…T^T 总结规律就是,dp数组要比原来各个size 1,dp[i][j] Math.max(xxx, xxxx(根据题目情况进行各种处理)) 解答: …...
python set是什么类型
python set是一种数据类型,数学里的集合概念,在Python语言里对应的是set类型。与list,tuple不同的地方是,set更加强调的是一种“从属关系”(membership),跟顺序无关,所以有重复的元素…...
redis事务(redis features)
redis支持事务,也就是可以在一次请求中执行多个命令。redis中的事务主要是通过MULTI和EXEC这两个命令来实现的。 MULTI命令用来开启一个事务,事务开启之后,所有的命令就都会被放入到一个队列中,最后通过一个EXEC命令来执行事务中…...
SpringBoot整合minio
SpringBoot整合minio 1. 下载及安装1.1 windows版本1.2 Linux版本 2. SpringBoot整合minio2.1 依赖2.2 配置文件2.3 配置类2.4 工具类2.5 测试1. 业务层2. 控制层 1. 下载及安装 1.1 windows版本 目录结构 启动文件 标红的地方按实际安装地更改 echo off REM 声明采用UT…...
3090. 每个字符最多出现两次的最长子字符串
说在前面 🎈不知道大家对于算法的学习是一个怎样的心态呢?为了面试还是因为兴趣?不管是出于什么原因,算法学习需要持续保持。 题目描述 给你一个字符串 s ,请找出满足每个字符最多出现两次的最长子字符串,…...
26.活锁、饥饿锁
两个线程,相互改变了对方结束条件,导致两个线程不能结束。执行时间也都是一样,导致两个线程永远不会结束。 Slf4j public class LiveLockDemo {static volatile int count 10;public static void main(String[] args) {new Thread(() ->…...
docker 安装nginx
一、先查看有没有nginx镜像 docker images 二、发现没有nginx镜像,下载最新镜像 docker pull nginx 三、运行镜像 为了先复制出部分文件,先启动一个临时容器 docker run --name nginx -p 9001:80 -d nginx docker cp nginx:/etc/nginx/conf.d /home/…...
英雄联盟LCU工具集:3大核心功能如何提升你的游戏体验?
英雄联盟LCU工具集:3大核心功能如何提升你的游戏体验? 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit Lea…...
【大模型】-名词手册-扫盲
写在前面 本篇文章用来记录在了解学习大模型的过程中遇到的一些名词缩写,好记性不如烂笔头,记录下来,也供大家参考。如有不正确的,欢迎指正。 目录写在前面名词扫盲写在后面名词扫盲 分类缩写英文全程中文备注-----智能体通信协议…...
避坑指南:Xilinx PCIe IP的lane反序问题与GT时钟约束的隐藏陷阱
Xilinx PCIe IP实战:破解Lane反序与GT时钟约束的五大核心难题 当你在Vivado中首次生成PCIe IP核时,可能会惊讶地发现硬件实际的lane顺序与代码中的定义完全相反。这不是bug,而是Xilinx默认的设计特性。更棘手的是,GT参考时钟的自动…...
从3大维度突破OCR效率瓶颈:5类场景的实战解决方案
从3大维度突破OCR效率瓶颈:5类场景的实战解决方案 【免费下载链接】Umi-OCR_plugins Umi-OCR 插件库 项目地址: https://gitcode.com/gh_mirrors/um/Umi-OCR_plugins 在数字化办公与学习中,OCR(光学字符识别)技术已成为信息…...
3分钟掌握Windows音频路由:让每个程序都有专属音频输出 [特殊字符]
3分钟掌握Windows音频路由:让每个程序都有专属音频输出 🎧 【免费下载链接】audio-router Routes audio from programs to different audio devices. 项目地址: https://gitcode.com/gh_mirrors/au/audio-router 你是否曾经遇到过这样的烦恼&…...
保姆级教程:在Windows上用Anaconda+Pycharm搞定YOLOv5环境(含CUDA12.1配置)
零失败指南:Windows下用AnacondaPycharm搭建YOLOv5全流程解析 1. 环境准备:从零开始的深度学习工作站 在个人电脑上搭建深度学习环境往往让初学者望而生畏,尤其是面对CUDA版本兼容性、虚拟环境管理等复杂问题。本文将手把手带你完成从Anaco…...
XZ1851输入电压6-40V 输出电流2.5A 输出电压ADJ(小于39V)
产品概述 XZ1851 是一款内置功率 MOSFET的单片降压型开关模式转换器。 XZ1851在 6-40V 宽输入电源范围内实现2.5 A最大输出电流,并且具有出色的线电压和负载调整率。 XZ1851 采用 PWM 电流模工作模式,环路易于稳定并提供快速的瞬态响应。 XZ1851 外部提供…...
EB Tresos里XDM文件详解:不只是配置界面,更是你定制MCAL模块的‘源代码’
EB Tresos中XDM文件的深度解析:从配置界面到MCAL模块定制化开发 在AUTOSAR开发领域,EB Tresos Studio作为行业标准的MCAL配置工具,其核心机制往往隐藏在那些看似普通的配置文件中。XDM文件就是这样一个关键角色——它远不止是配置界面的数据源…...
ChatTTS 入门指南:从零开始构建你的第一个语音对话应用
最近在做一个需要语音交互的小项目,选型时发现了 ChatTTS 这个工具,感觉挺有意思的。它不像一些大厂的 TTS 服务那么“重”,更像是一个专为对话场景优化的语音合成工具。如果你是第一次接触,可能会觉得有点无从下手,比…...
IPv6支持不足?选用双栈兼容IP离线库,平滑过渡
上个月,我接手了一个线上报修:某客户的内网监控系统突然查不到部分IP的归属地了。登录服务器一看,日志里全是这种报错: Error: IP format not supported: 240e:3a0:xxxx::1 查代码发现,这套系统三年前上线时嵌了一个…...
