当前位置: 首页 > 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分钟)即可在国内访问。

http://www.lryc.cn/news/396732.html

相关文章:

  • stm32基本定时器
  • 网络安全基础-1
  • SSH远程访问及控制
  • Qt 绘图详解
  • Python 爬虫与 Java 爬虫:相似之处、不同之处和选项
  • 视频监控汇聚平台LntonCVS视频监控系统解决智慧产业园的安全应用方案
  • MAVLink代码生成-C#
  • 二四、3d人脸构建
  • 鸿蒙开发:Universal Keystore Kit(密钥管理服务)【加解密(C/C++)】
  • Python的入门知识(上)
  • 2024春秋杯网络安全联赛夏季赛-PWN
  • 怎么提高音频声音大小?提高音频声音大小的四种方法
  • 从数据仓库到数据湖(下):热门的数据湖开源框架
  • 对话AI原生 | 千帆AppBuilder重构企业AI原生应用开发体验
  • CF253C Text Editor 题解
  • Spring Boot 创建定时任务
  • Vue使用Echarts(入门级)
  • 2025届秋招提前批信息汇总(计算机类)
  • Scala Collection(集合)
  • Go 语言 UUID 库 google/uuid 源码解析:UUID version4 的实现
  • 开发个人Go-ChatGPT--6 OpenUI
  • Spring中的工厂模式详解及应用示例
  • Electron 简单搭建项目
  • 旗晟智能巡检机器人:开启工业运维的智能化新篇章
  • vue3的常用 Composition API有哪些?
  • 深度优先算法-DFS(算法篇)
  • C++模块化之内部类
  • k8s-第九节-命名空间
  • 【AI大模型新型智算中心技术体系深度分析 2024】
  • 王道计算机数据结构+插入排序、冒泡排序、希尔排序、快速排序、简单选择排序