用Vue全家桶手工写了一个高仿抖音，全开源版，PC浏览器请用手机模式访问。先按F12调出控制台，再按Ctrl+Shift+M切换到手机模式，手机请用Via浏览器或者Chrome浏览器预览。其他浏览器会强制将视频全屏，导致样式都失效。

演示站效果

douyin-vue 是一个模仿 抖音|TikTok 的移动端短视频项目。Vue 在移动端的”最佳实践”，媲美原生 App 丝滑流畅的使用体验。使用了最新的 Vue 技术栈，基于 Vue3、Vite5 、Pinia实现。数据保存在项目本地，通过 axios-mock-adapter 库拦截Api 并返回本地json数据，模拟真实后端请求

项目运行

• • 本项目是基于 Vue 开发的，需要 node 环境来运行。

安装 NodeJS，参考官方文档

• • 安装 pnpm 包管理工具，运行 npm install -g pnpm 来安装

• • 上传项目源码到项目根目录

• • 进入项目目录cd douyin，在项目根目录下，运行pnpm install来下载依赖。

• • 执行pnpm dev来启动项目，项目默认地址为http://localhost:3000

• • 在浏览器中打开http://localhost:3000 来访问项目。 Chrome 切换成手机模式快捷键，先按 F12 调出控制台，再按 Ctrl+Shift+M（设备仿真模拟）

注意：必须 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 才能正常预览

免责声明

本项目仅适用于技术研究和分享，不得用于商业使用 作者：zyronon
著作权归原作者所有。商业转载请联系作者获得授权，非商业转载请注明出处

感谢您的访问，Ctrl+D收藏本站吧。