用Vue全家桶手工写了一个高仿抖音,全开源版,PC浏览器请用手机模式访问。先按F12调出控制台,再按Ctrl+Shift+M切换到手机模式,手机请用Via浏览器或者Chrome浏览器预览。其他浏览器会强制将视频全屏,导致样式都失效。
douyin-vue
是一个模仿 抖音|TikTok
的移动端短视频项目。Vue
在移动端的”最佳实践”,媲美原生 App
丝滑流畅的使用体验。使用了最新的 Vue
技术栈,基于 Vue3
、Vite5
、Pinia
实现。数据保存在项目本地,通过 axios-mock-adapter
库拦截Api 并返回本地json数据,模拟真实后端请求
![图片[1] - 一款高仿抖音VUE开源项目源码](https://img.alicdn.com/imgextra/i3/2210123621994/O1CN0151mKAU1QbIhRSePHO_!!2210123621994.jpg)
项目运行
-
- 本项目是基于 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
著作权归原作者所有。商业转载请联系作者获得授权,非商业转载请注明出处
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容