当前位置: 首页 > news >正文

用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); // 收集子集&#xff0c;要放在终止添加的上面&#xff0c;否则会漏掉自…...

VC++、GCC、CLANG,INT128有符号整数编译器关键字

注意INT128为目标平台扩展关键字&#xff0c;不属于C/C语言本身支持特性&#xff0c;每个C/C编译器平台支持上都略有不同&#xff0c;甚至不支持。 可以详细参考本人此篇文章&#xff1a; GUN C/C (GCC/CLANG) 对于 __int128_t &#xff08;128位有符号大整数的扩展支持平台限…...

用于HUD平视显示器的控制芯片:S2D13V40

一款利用汽车抬头显示技术用于HUD平视显示器的控制芯片:S2D13V40。HUD的全称是Head Up Display&#xff0c;即平视显示器&#xff0c;以前应用于军用飞机上&#xff0c;旨在降低飞行员需要低头查看仪表的频率。起初&#xff0c;HUD通过光学原理&#xff0c;将驾驶相关的信息投射…...

JSP使用模板字符串数据不能渲染的问题

entrap father 的 rubbish JSP 数据不能直接渲染,要从接口请求后去拼接结构 然后模板字符串不能直接用 用以下方法是不能渲染出数据的 let div <div class"circulation"><div class"list"><div class"left"><div class&qu…...

AI音乐GPT时刻来临:Suno 快速入门手册!

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

数字乡村发展蓝图:科技赋能农村实现全面振兴

目录 一、数字乡村发展蓝图的内涵与目标 二、科技赋能农村&#xff1a;数字乡村发展的动力与路径 &#xff08;一&#xff09;加强农业科技创新&#xff0c;提升农业生产效率 &#xff08;二&#xff09;推进农村电商发展&#xff0c;拓宽农民增收渠道 &#xff08;三&…...

Day42 动态规划 part04

Day42 动态规划 part04 46. 携带研究材料(卡哥的卡码网的题目) 背包问题 我的思路: 写不了一点儿…T^T 总结规律就是&#xff0c;dp数组要比原来各个size 1&#xff0c;dp[i][j] Math.max(xxx, xxxx&#xff08;根据题目情况进行各种处理&#xff09;) 解答&#xff1a; …...

python set是什么类型

python set是一种数据类型&#xff0c;数学里的集合概念&#xff0c;在Python语言里对应的是set类型。与list&#xff0c;tuple不同的地方是&#xff0c;set更加强调的是一种“从属关系”&#xff08;membership&#xff09;&#xff0c;跟顺序无关&#xff0c;所以有重复的元素…...

redis事务(redis features)

redis支持事务&#xff0c;也就是可以在一次请求中执行多个命令。redis中的事务主要是通过MULTI和EXEC这两个命令来实现的。 MULTI命令用来开启一个事务&#xff0c;事务开启之后&#xff0c;所有的命令就都会被放入到一个队列中&#xff0c;最后通过一个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. 每个字符最多出现两次的最长子字符串

说在前面 &#x1f388;不知道大家对于算法的学习是一个怎样的心态呢&#xff1f;为了面试还是因为兴趣&#xff1f;不管是出于什么原因&#xff0c;算法学习需要持续保持。 题目描述 给你一个字符串 s &#xff0c;请找出满足每个字符最多出现两次的最长子字符串&#xff0c;…...

26.活锁、饥饿锁

两个线程&#xff0c;相互改变了对方结束条件&#xff0c;导致两个线程不能结束。执行时间也都是一样&#xff0c;导致两个线程永远不会结束。 Slf4j public class LiveLockDemo {static volatile int count 10;public static void main(String[] args) {new Thread(() ->…...

docker 安装nginx

一、先查看有没有nginx镜像 docker images 二、发现没有nginx镜像&#xff0c;下载最新镜像 docker pull nginx 三、运行镜像 为了先复制出部分文件&#xff0c;先启动一个临时容器 docker run --name nginx -p 9001:80 -d nginx docker cp nginx:/etc/nginx/conf.d /home/…...

dnGrep搜索结果分析与报告生成:如何导出和分享搜索数据

dnGrep搜索结果分析与报告生成&#xff1a;如何导出和分享搜索数据 【免费下载链接】dnGrep Graphical GREP tool for Windows 项目地址: https://gitcode.com/gh_mirrors/dn/dnGrep dnGrep是一款强大的Windows图形化GREP搜索工具&#xff0c;它不仅能够快速搜索文件内容…...

可配置处理器技术:嵌入式SOC设计的灵活加速方案

1. 可配置处理器技术概述在嵌入式系统芯片(SOC)设计领域&#xff0c;算法实现方式的选择一直是个关键决策点。传统上&#xff0c;开发者面临两种主要选择&#xff1a;要么将算法编译成通用处理器(如RISC或DSP)可执行的软件&#xff0c;要么将其直接实现为专用硬件电路(ASIC)。前…...

基于GPT的AI代码审查:GitHub Action自动化部署与实战指南

1. 项目概述&#xff1a;当AI成为你的代码审查搭档 在团队协作开发中&#xff0c;代码审查&#xff08;Code Review&#xff09;是保证代码质量、统一编码风格、传播知识的关键环节。但现实往往是&#xff0c;资深同事忙得脚不沾地&#xff0c;新人的PR&#xff08;Pull Reque…...

TalkReplay:构建本地化AI编程对话时光机,实现知识持久化管理

1. 项目概述&#xff1a;一个为AI编程对话而生的“时光机”如果你和我一样&#xff0c;日常开发已经离不开Claude、Cursor这类AI编程助手&#xff0c;那你一定遇到过这个痛点&#xff1a;和AI进行了一下午的深度对话&#xff0c;写了几百行代码&#xff0c;解决了几个关键问题。…...

别再傻傻用余弦相似度了!手把手教你用ResNet50+LSHash搞定海量图片秒级检索(附完整Python代码)

别再傻傻用余弦相似度了&#xff01;手把手教你用ResNet50LSHash搞定海量图片秒级检索 当你的图片库从几千张膨胀到几百万张时&#xff0c;用传统余弦相似度做图像检索就像在高速公路上骑自行车——明明有更快的交通工具&#xff0c;你却还在用最原始的方法。最近帮一家电商平台…...

ThunderAI:用大语言模型插件打造智能邮件工作流

1. 项目概述&#xff1a;当AI助手遇见邮件客户端 如果你和我一样&#xff0c;每天要在Thunderbird里处理几十甚至上百封邮件&#xff0c;那你肯定也经历过那种“邮件疲劳”——写回复时词穷、面对长篇大论需要快速提炼要点、或者想给邮件分个类却懒得手动打标签。传统的邮件客…...

【通信】D2D通信中基于Qlearning强化学习算法的联合资源分配与功率控制算法matlab仿真

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。&#x1f34e;完整代码获取 定制创新 论文复现点击&#xff1a;Matlab科研工作室&#x1f447; 关注我领取海量matlab电子书和数学建模资料 &#x1f3…...

3步解锁AcFunDown:你的A站视频离线保存专家

3步解锁AcFunDown&#xff1a;你的A站视频离线保存专家 【免费下载链接】AcFunDown 包含PC端UI界面的A站 视频下载器。支持收藏夹、UP主视频批量下载 &#x1f633;仅供交流学习使用喔 项目地址: https://gitcode.com/gh_mirrors/ac/AcFunDown 你是否曾经遇到过这样的情…...

不止于VWF:用Modelsim SE-64 10.4 为你的Quartus 18.1 Verilog项目做高效前仿真

超越基础工具链&#xff1a;Modelsim SE-64与Quartus 18.1深度协同仿真指南 当Verilog代码通过Quartus编译后&#xff0c;许多开发者会止步于基础功能验证。但真正的设计可靠性往往隐藏在时序边界条件和复杂状态机交互中——这正是专业仿真工具的价值所在。本文将带您突破VWF的…...

保姆级教程:用Arduino IDE给GRBL固件刷机,手把手搞定激光雕刻机大脑

GRBL固件刷机全指南&#xff1a;从零构建激光雕刻机控制核心 当你第一次拿到激光雕刻机的控制板时&#xff0c;最关键的步骤莫过于为它注入"灵魂"——GRBL固件。作为开源CNC控制领域的标杆&#xff0c;GRBL以其高效稳定的运动控制算法赢得了全球创客的青睐。但面对A…...