使用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://xiahunao.cn/news/3227251.html

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

相关文章

网络安全----防御----防火墙安全策略组网

防火墙组网 要求: 1,DMz区内的服务器,办公区仅能在办公时间内(9:00-18:00)可以访问,生产区的设备全天可以访问。 2,生产区不允许访问互联网,办公区和游客区允许访问互联网 3,办公区设备10.0.…

【银河麒麟高级服务器操作系统】数据中心系统异常卡死分析处理建议

了解银河麒麟操作系统更多全新产品,请点击访问:https://product.kylinos.cn 1.服务器环境以及配置 【机型】浪潮NF5280M5 处理器: Intel 内存: 1T 【内核版本】 4.19.90-24.4.v2101.ky10.x86_64 【OS镜像版本】 银河麒麟…

C++初学者指南-5.标准库(第一部分)--顺序容器

C初学者指南-5.标准库(第一部分)–顺序容器 文章目录 C初学者指南-5.标准库(第一部分)--顺序容器标准顺序容器常见特点规律性&#xff1a;复制&#xff0c;分配&#xff0c;比较类型推导(C17)常用接口部分 array<T,size>vector\<T>C 的默认容器快速回顾迭代器范围插…

ZFT9-7VE8043-Z同期脉冲发送装置100V JOSEF约瑟 柜内安装

ZFT9(PIG)同期脉冲发送装置 系列型号 ZFT9(PIG) 7VE8033同期脉冲发送装置; ZFT9(PIG) 7VE8043同期脉冲发送装置; ZFT9 7VE8033同期脉冲发送装置; ZFT9 7VE8043同期脉冲发送装置; 用途&#xff1a; ZFT9同期脉冲发送装置用于船舶的三相系统&#xff0c;根据发电机和电力系…

985研究生8年终毕业,学位证颁发11天后被作废?

“正常是学校颁证给学院&#xff0c;但学院就没告诉我&#xff0c;还把学校颁发的证书给撤销了&#xff0c;这中间学院并没有书面或电话告知我本人。”34岁读研&#xff0c;如今已42岁的内蒙古任女士回想起求学不易&#xff0c;很是心酸。 2015年3月&#xff0c;任女士考取2015…

用微信服务号支付门诊缴费

时间上午10刚过&#xff0c;医院里计价收费处排起了长龙&#xff0c;放眼望去&#xff0c;左边的窗口六条队。右边在原来发药的位置也开辟了收费窗口&#xff0c;数了一下有四条队。一共十条排队付费的长龙&#xff0c;每一条队伍的人数不下20人&#xff0c;也即超过200人在排队…

第一关:Linux基础知识

Linux基础知识目录 前言LinuxInternStudio 关卡1. InternStudio开发机介绍2. SSH及端口映射2.1 什么是SSH&#xff1f;2.2 如何使用SSH远程连接开发机&#xff1f;2.2.1 使用密码进行SSH远程连接2.2.2 配置SSH密钥进行SSH远程连接2.2.3 使用VScode进行SSH远程连接 2.3. 端口映射…

SpringCloudAlibaba Nacos配置中心与服务发现

目录 1.配置 1.1配置的特点 只读 伴随应用的整个生命周期 多种加载方式 配置需要治理 1.2配置中心 2.Nacos简介 2.1特性 服务发现与服务健康检查 动态配置管理 动态DNS服务 服务和元数据管理 3.服务发现 1.配置 应用程序在启动和运行的时候往往需要读取一些配置信…

Stable Diffusion【ControlNet】:tile模型预处理器详解

今天我们重点对tile模型的预处理器进行一个详细的讲解。 一. Tile模型预处理器介绍 点击ControlNet插件Tile模型下的预处理下拉菜单&#xff0c;会看到Tile模型对应的预处理器有几个选项。 blur_gaussian&#xff1a;高斯模糊&#xff0c;主要用于调整景深用的 tile_colorfi…

什么是源代码加密?如何给源代码加密?

在软件开发领域&#xff0c;源代码的安全问题也日益凸显。源代码一旦泄露&#xff0c;不仅可能导致企业的技术优势丧失&#xff0c;还可能引发法律纠纷和财务损失。我们在了解源代码加密时&#xff0c;首先要了解什么是源代码加密&#xff1f; 什么是源代码加密&#xff1f; 源…

DFT: Parameter-Efficient Fine-Tuning with Discrete Fourier Transform

文章汇总 动机 相比LoRA&#xff0c;进一步压缩可训练参数以进行微调LFMs。 效果如下&#xff1a; 解决办法 相比LoRA&#xff0c;这里的 Δ W \Delta W ΔW为 E ∈ R 2 n E\in \mathbb R^{2\times n} E∈R2n和 c ∈ R n c\in \mathbb R^n c∈Rn。对于所有 L L L个适应层&…

JAVASE进阶day08(Map双列集合)

HashMap 1.HashMap基本使用 package com.lu.day08.map;import java.util.HashMap; import java.util.Map; import java.util.Set;public class MapDome {public static void main(String[] args) {HashMap<String , String> map new HashMap<>();//添加后者修改-…

一个简单的 Vue 组件例子

https://andi.cn/page/621509.html

每日一练 - RSTP根桥选举机制

01 真题题目 在如图所示的网络中&#xff0c;三台交换机运行 RSTP&#xff0c;配置情况如图所示。根据图中配置情况&#xff0c;判断根交换机为: A.SWA B.SWB C.SWC D.无法确定 02 真题答案 A 03 答案解析 根据RSTP的根桥选举原则&#xff0c;优先级越低的交换机越有可能成…

【前端】面试八股文——meta标签

【前端】面试八股文——meta标签 在HTML文档中&#xff0c;meta标签是一个关键但常被忽视的元素。它位于文档的<head>部分&#xff0c;用于提供关于HTML文档的元数据&#xff08;metadata&#xff09;。这些元数据不会直接显示在页面上&#xff0c;但对搜索引擎优化&…

Linux之免费证书工具certbot安装和使用

一、cerbot简介 Certbot是一个免费的开源软件工具&#xff0c;用于在手动管理的网站上自动使用Let’s Encrypt证书以启用HTTPS。要想让自己的网站启用https协议&#xff0c;需要一个由CA&#xff08;数字证书认证机构&#xff09;颁发的&#xff0c;能够让各个浏览器都能承认的…

mount卡住(失败)解决方案

mount -a卡主 第一步确保两边都打开了NFS服务&#xff01;&#xff01;&#xff01;&#xff01; 客户端执行mount -av 查看信息是拒绝服务 查看服务端&#xff1a;showmount -e 192.168.25.168 看提示信息处理&#xff0c;关闭两端的防火钱 遇到这个错误就是服务端不让客户端…

大模型是这样炼成的

原文链接&#xff1a; 大模型是这样训练的 AI因你而升温&#xff0c;记得加个星标哦&#xff01; 大家好&#xff0c;我是泰哥。距离上次写技术贴已经1年有余&#xff0c;这一年当中算法技术的发展可以说是日新月异。今天和大家聊聊大模型的训练的三个阶段&#xff0c;分别为有…

绝区零启动遇到的问题

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ​ 绝区零》作为米哈游的一款全新都…

盒马鲜生礼品卡如何处理?

前两天商场活动&#xff0c;买够一定面额的商品送一张一百的盒马卡 搜了下 盒马鲜生礼品卡可直接在线下或线上盒马超市购物时使用。 但是一百块钱的卡也买不了太多东西&#xff0c;反而最后还要补差价 最后我直接在收卡云上把卡卖出去了&#xff0c;100块钱面值卖了93.2&…