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

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

相关文章:

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

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

stm32基本定时器

Driver_TIM6.c 需要注意立即进入中断问题,原因是预分频寄存器并没有更新预分频系数。 #include "Driver_TIM6.h" #include "Delay.h" /*** description: 给定时器6进行初始化* return {*}*/ void Driver_TIM6_Init(void) {/* 1. 给定时器6开启…...

网络安全基础-1

棱角社区:[~]#棱角 ::Edge.Forum* 专业名词 操作系统 文件下载 linux:下载命令 1. wget命令 wget是一个非常强大的命令行下载工具,支持HTTP、HTTPS、FTP等多种协议,并具备断点续传、递归下载等功能。 基本用法: 下载文件到…...

SSH远程访问及控制

目录 一、SSH远程管理 1、SSH定义 2、SSH客户端和服务端 3、SSH工作类型 3.1、对称加密 3.2、非对称加密 4、SSH工作原理 公钥传输原理 4.1、基本概念 4.2、工作过程 5、OpenSSH服务器 二、SSH远程登录方式 1、SSH直接远程登录 2、SSH指定端口登录 3、黑白名单 …...

Qt 绘图详解

文章目录 头文件和构造函数启用反锯齿功能绘制矩形绘制圆角矩形绘制椭圆绘制圆弧绘制弦绘制凸多边形绘制图片绘制直线绘制多条直线绘制多点连接的线绘制路径绘制扇形绘制点绘制文本擦除矩形区域填充矩形填充路径 头文件和构造函数 #include "mainwindow.h" #include…...

Python 爬虫与 Java 爬虫:相似之处、不同之处和选项

在信息时代,网络上可用的数据量巨大且不断增长。为了从这些数据中提取有用的信息,爬虫已成为一种重要的技术。Python 和 Java 都是流行的编程语言,都具有强大的爬虫功能。本文将深入探讨 Python 爬虫和 Java 爬虫之间的差异,以帮助…...

视频监控汇聚平台LntonCVS视频监控系统解决智慧产业园的安全应用方案

近年来,随着全国各地数字化转型和相关政策的出台,数字化和智慧化在各行业迅速发展,尤其是作为产业集群重要组成部分的产业园区。然而,园区智慧化进程加快的同时,数字化转型面临着诸如视频监控数据分散、联通不畅、碎片…...

MAVLink代码生成-C#

一. 准备Windows下安装环境 Python 3.3 – 官网链接下载Python future模块 –pip3 install future TkInter (GUI 工具). – python for Windows自带,无需下载环境变量PYTHONPATH必须包含mavlink存储库的目录路径。 –set PYTHONPATH你的mavlink源码路径 源码下载在…...

二四、3d人脸构建

一、下载github项目3dmm_cnn-master https://github.com/anhttran/3dmm_cnn.git 一个使用深度神经网络从单个图像进行 3D 人脸建模的项目,端到端代码,可直接根据图像强度进行 3D 形状和纹理估计;使用回归的 3D 面部模型,从检测到的面部特征点估计头部姿势和表情。…...

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【加解密(C/C++)】

加解密(C/C) 以AES 256密钥为例,完成加解密。具体的场景介绍及支持的算法规格。 在CMake脚本中链接相关动态库 target_link_libraries(entry PUBLIC libhuks_ndk.z.so)开发步骤 生成密钥 指定密钥别名。初始化密钥属性集。调用OH_Huks_GenerateKeyItem生成密钥)…...

Python的入门知识(上)

学习目标: 了解python 入门知识 这里写目录标题 学习目标:学习内容:快速入门 Python 基础特殊规则及特殊字符:Python 文件组织:多元赋值:变量命名规则:__name__ 系统变量:内存管理&a…...

2024春秋杯网络安全联赛夏季赛-PWN

文章目录 stdout测试setvbuf(stdout, 0LL, 2, 0LL)绕过或者输出直到缓冲区满使用system("/bin/sh")或者onegadget即使setvbuf(stdout, 0LL, 0, 0LL);也能立即有回显参考[https://starrysky1004.github.io/2024/07/05/2024-shu-qi-xue-xi-ji-lu/#toc-heading-4](https…...

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

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

从数据仓库到数据湖(下):热门的数据湖开源框架

文章目录 一、前言二、Delta Lake三、Apache Hudi四、Apache Iceberg五、Apache Paimon六、对比七、笔者观点八、总结九、参考资料 一、前言 在上一篇从数据仓库到数据湖(上):数据湖导论文章中,我们简单讲述了数据湖的起源、使用原因及其本质。本篇文章…...

对话AI原生 | 千帆AppBuilder重构企业AI原生应用开发体验

人工智能和大模型正在引领当前最重要的科技创新趋势。在过去的一年中,行业关注点已从大模型研发转向实际应用,正成为推动创新和转型的关键力量。百度智能云千帆AppBuilder作为基于大模型的企业级AI原生应用开发工作台,支持应用的快速开发和发…...

CF253C Text Editor 题解

思路 既然要求最少步数,那我们可以用bfs 如果鼠标的位置比上一行的行末位置大,如果按上的话,移到上一行的行末。如果鼠标的位置比下一行的行末位置大,如果按下的话,移到下一行的行末。 注意当鼠标位置超过当前行最大…...

Spring Boot 创建定时任务

在现代应用程序开发中,定时任务是一个常见的需求。Spring Boot作为一个强大的框架,提供了简单易用的定时任务调度功能。本文将详细介绍如何在Spring Boot中创建和管理定时任务,并提供完整的代码示例。 1. 什么是定时任务 定时任务是指在预定…...

Vue使用Echarts(入门级)

最终效果&#xff1a; npm install echarts --save // 先安装echarts<template><!-- 创建一个dom区域用于挂载echarts图表 --><div id"chart" style"width: 600px;height:500px;"/> </template> <script> import * as ech…...

2025届秋招提前批信息汇总(计算机类)

私企篇 深信服 链接&#xff1a;https://app.mokahr.com/campus_apply/sangfor/27944#/home内推码&#xff1a;NTAHRFS截止时间&#xff1a;6月21日 TP-LINK 链接&#xff1a;https://hr.tp-link.com.cn/jobList?jobId107&jobDirection0&workPlace0&currentPa…...

Scala Collection(集合)

Scala Collection(集合) Scala集合库是Scala语言的核心特性之一,它提供了一套丰富的数据结构来存储、管理和操作数据。Scala集合分为可变(mutable)和不可变(immutable)两种类型,每种类型都有其特定的用途和优势。本文将详细介绍Scala集合库的基本概念、常用集合类型以及…...

Go 语言 UUID 库 google/uuid 源码解析:UUID version4 的实现

google/uuid 库地址 本文将解析 googl/uuid 库中 UUID 变体10版本4的实现。 版本 4 的 UUID 采取完全随机的方式实现&#xff0c;简单来说就是将 UUID 中的 122 位全部随机填充&#xff08;剩余的 6 位作标记位&#xff09;。版本 4 的 UUID 存在一定的重复风险&#xff0c;但…...

开发个人Go-ChatGPT--6 OpenUI

开发个人Go-ChatGPT–6 OpenUI Open-webui Open WebUI 是一种可扩展、功能丰富且用户友好的自托管 WebUI&#xff0c;旨在完全离线运行。它支持各种 LLM 运行器&#xff0c;包括 Ollama 和 OpenAI 兼容的 API。 功能 由于总所周知的原由&#xff0c;OpenAI 的接口需要密钥才…...

Spring中的工厂模式详解及应用示例

1. Spring中的BeanFactory BeanFactory是一个接口&#xff0c;表示它是一个工厂&#xff0c;负责生产和管理bean。在Spring中&#xff0c;BeanFactory是IOC容器的核心接口&#xff0c;定义了管理Bean的通用方法&#xff0c;如 getBean 和 containsBean。 BeanFactory与IOC容器…...

Electron 简单搭建项目

准备工作 全局安装 node npm创建文件夹&#xff0c;并执行 npm init安装 electron npm i electron --save-dev在 package.json 配置文件中的scripts字段下增加一条start命令&#xff1a; {"scripts": {"start": "electron ."} }由于配置中的入…...

旗晟智能巡检机器人:开启工业运维的智能化新篇章

在当今快速发展的工业领域&#xff0c;安全、效率和成本控制是企业运营的核心。旗晟科技以创新为驱动&#xff0c;推出了一站式的工业级智能巡检机器人数字化全景运维解决方案&#xff0c;为石油、天然气、化工、电力等高危行业提供了一个全新的运维模式。 一、面对挑战&#x…...

vue3的常用 Composition API有哪些?

Vue.js 3.0 引入了 Composition API&#xff0c;作为一种新的组织组件逻辑的方式&#xff0c;相比于传统的 Options API&#xff0c;Composition API 提供了更灵活、更可复用的代码组织方式。 以下是 Vue 3.0 中常用的 Composition API&#xff1a;setup() 函数&#xff1a; s…...

深度优先算法-DFS(算法篇)

算法之深度优先算法 深度优先算法(DFS) 概念&#xff1a; 深度优先算法(DFS)跟BFS算法一样是用于遍历图的算法&#xff0c;但是DFS并不像BFS算法一样&#xff0c;它搜索出来的路径不具有最短性&#xff0c;并且dfs算法类似于枚举&#xff0c;因此DFS算法一般用于求出问题的所…...

C++模块化之内部类

目录 1.引言 2.内部类的访问控制 3.优缺点分析 4.实际运用 4.1.实现复杂数据结构 4.2.封装细节实现 4.3.事件处理和回调 4.4.模板元编程辅助类 4.5. 访问控制和封装 4.6. 代码组织和模块化 5.总结 1.引言 在C中&#xff0c;内部类&#xff08;Nested Class&#xff…...

k8s-第九节-命名空间

命名空间 如果一个集群中部署了多个应用&#xff0c;所有应用都在一起&#xff0c;就不太好管理&#xff0c;也可以导致名字冲突等。 我们可以使用 namespace 把应用划分到不同的命名空间&#xff0c;跟代码里的 namespace 是一个概念&#xff0c;只是为了划分空间。 # 创建命…...

【AI大模型新型智算中心技术体系深度分析 2024】

文末有福利&#xff01; ChatGPT 系 列 大 模 型 的 发 布&#xff0c; 不 仅 引 爆 全 球 科 技 圈&#xff0c; 更 加 夯 实 了 人 工 智 能&#xff08;Artificial Intelligence, AI&#xff09;在未来改变人类生产生活方式、引发社会文明和竞争力代际跃迁的战略性地位。当…...

app开发用到的技术/郑州seo关键词优化公司

近日&#xff0c;Docker公司宣布启动一项Docker for Mac和Docker for Windows有限Beta测试计划。它们在Docker Toolbox上做了许多改进&#xff0c;主要包括&#xff1a; 更快更可靠&#xff1a;不再需要VirtualBox&#xff0c;Docker引擎运行在一个安装在xhyve&#xff08;Mac …...

济南做html5网站建设/百度seo什么意思

项目场景&#xff1a;python使用pymysql import pymysql# 建立数据库连接 conn pymysql.connect(hostlocalhost,port3306,userroot,password,charsetutf8 ) print(conn) # 获取游标 cursor conn.cursor() print(cursor)问题描述&#xff1a; 在pycharm连接的时候明明之前连…...

大兴高端网站建设/下载百度2024最新版

效果图 image.png 提供的方法 和 属性 ref.show() // ref 主动调用显示打开ref.hide() // ref 主动调用隐藏关闭modalBoxHeight: 300, // 盒子高度modalBoxBg: #fff, // 盒子背景色hide: function () { }, // 关闭时的回调函数transparentIsClick: true // 透明区域是否可以点…...

网站百度权重怎么提升/seo优化技术培训中心

上篇文章中我们提到了代价函数J(θ)J(\theta)J(θ)&#xff0c;并期望使它最小化&#xff0c;那代价函数长什么样子呢&#xff1f; 接下来&#xff0c;我们将给大家一个直观的感受&#xff0c;看看参数θ\thetaθ取不同值时&#xff0c;J(θ)J(\theta)J(θ)的几何呈现 我们可以…...

可以做英语阅读理解的网站/比较正规的代运营

使用 Spring MVC 时&#xff0c;很多业务场景下 Controller 需要接收日期时间参数。一个简单的做法是使用 String 接收日期时间字符串(例如&#xff1a;2020-01-29)&#xff0c;然后在代码中将其转换成 Java 8 的日期时间类型或 java.util.Date 类型。这种方法虽然简单&#xf…...

宁波拾谷网站建设/西地那非片多少钱一盒

关于Python,如何利用Python技术变现 & 兼职接单也是大家比较感兴趣的; 这里总结了一些用Python赚外快的方式,大家伙可以自己去尝试一下。 Python兼职分为以下三种: 商家提供接口爬取数据(当然不做违法的爬取) 淘宝、拼多多等商业数据进行分析整理(数据分析、爬虫、…...