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

神码观察2024-07-10 20:40

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

开发指南

快速部署至 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)》在这里就不详细的说了

然后等待他解析完（预计1~3分钟）即可在国内访问。