TikTok 抖音 Vue.js,用 Vue 仿了一个抖音

douyin 是一个模仿抖音的移动端短视频项目,它基于 VueVite 实现。使用了最新的 Vue 全家桶技术栈,接口数据通过 axios-mock-adapter 模拟

在线访问

Vercel: http://dy.ttentau.top (国内推荐访问这个)

Netlify:https://douyins.netlify.app (需要翻墙)

注意PC 浏览器请用手机模式访问。先按 F12 调出控制台,再按 Ctrl+Shift+M 切换到手机模式

注意:手机请用 Via 浏览器 或者 Chrome 浏览器预览。其它浏览器会强制将视频全屏,导致样式失效

效果截图

TikTok 抖音 Vue.js,用 Vue 仿了一个抖音
TikTok 抖音 Vue.js,用 Vue 仿了一个抖音
TikTok 抖音 Vue.js,用 Vue 仿了一个抖音
TikTok 抖音 Vue.js,用 Vue 仿了一个抖音
TikTok 抖音 Vue.js,用 Vue 仿了一个抖音

运行项目

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

  1. 安装 NodeJS,参考官方文档
  2. 安装 pnpm 包管理工具,运行 npm install -g pnpm 来安装
  3. 使用 git clone https://github.com/zyronon/douyin.git 下载项目到本地
  4. 进入项目目录cd douyin,在项目根目录下,运行pnpm install来下载依赖。
  5. 执行pnpm dev来启动项目,项目默认地址为http://localhost:3000
  6. 在浏览器中打开http://localhost:3000 来访问项目。 Chrome 切换成手机模式快捷键,先按 F12 调出控制台,再按 Ctrl+Shift+M(设备仿真模拟)

项目地址:

 https://github.com/zyronon/douyin

原创文章,作者:简单一点,如若转载,请注明出处:https://www.506064.com/n/2719.html

(0)
简单一点的头像简单一点
上一篇 2024年3月30日 16:03
下一篇 2024年4月2日 18:56

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注