简体中文 | English

此代码仅供学习，请勿用于商业用途

简介

douyin 是一个模仿抖音的移动端短视频项目，它基于 vue 3, vite 2 实现。使用了最新的Vue全家桶技术栈，后台数据通过mock-js搭建。相信不管你是处于哪个段位的工程师，本项目都能帮助到你。

核心技术拆解（TODO）

• 手机端抓包
• 首页无限滚动
• me页面滚动逻辑
• 通话进入和挂起动画

欢迎提Bug,如有新的需求和想法，欢迎 issue 和 pr

预览

电脑端请用Chrome手机模式访问

手机请安卓Via浏览器预览。其他浏览器检测到页面内有视频会强制将视频全屏，并显示控制按钮，导致css和js都失效；后面可能考虑用app套个壳，至少在手机上能正常显示

在线预览地址1 在线预览地址2

功能点

页面	进度
首页	50%
-- 音乐	☑
-- 抖音音乐榜	☑
-- 搜索	50%
-- 直播	50%
朋友	0%
消息	☑
-- 聊天	☑
-- 各种通知	☑
我	90%
-- 求更新	☑
-- 关注和粉丝	☑
-- 编辑资料	☑
-- 添加朋友	☑
-- 我的音乐	☑
-- 抖音商城	0
-- 收藏视频\音乐	☑
-- 右侧菜单子页面	10%
-- 设置	☑
-- -- 具体设置页面	0%
登录\注册	☑

运行

# 克隆项目到本地
git clone https://github.com/zyronon/douyin.git

# 进入项目目录
cd douyin

# 安装依赖
npm install

# 启动服务
npm run serve

# 访问
Chrome浏览器访问 http://localhost:8080
Chrome切换成移动端模式快捷键，先按F12调出控制台，再按Ctrl+Shift+M

问题反馈

移步Issues，欢迎提出问题和建议。

MIT许可协议

MIT

声明

本项目仅做技术交流和学习，请勿用于商业目的！

Copyright (c) 2021 zyronon