Vue3 + Pinia 仿抖音,Vue 在移动端的最佳实践 . Imitate TikTok ,Vue Best practices on Mobile
Go to file
zyronon fe1fec2afe Merge remote-tracking branch 'origin/vue3-vite' into vue3-vite
# Conflicts:
#	src/pages/test/slide.js
2021-12-10 22:17:47 +08:00
public init 2021-10-22 00:39:35 +08:00
src 优化slide 2021-12-10 14:05:24 +08:00
.gitignore 优化me页面 2021-08-16 01:17:09 +08:00
index.html 优化通话弹窗 2021-11-03 23:30:59 +08:00
LICENSE update README.md 2021-11-03 11:08:58 +08:00
package-lock.json 优化slide 2021-12-09 18:01:40 +08:00
package.json 优化slide 2021-12-09 17:56:50 +08:00
README.md update README.md 2021-11-03 22:20:43 +08:00
vite.config.js 添加缓存,以及列表页面回显 2021-10-25 21:53:03 +08:00

Star Vue Vant-ui easymock license

简体中文 | English

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

简介

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

核心技术拆解

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

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

预览图

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

功能点

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

运行

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

# 进入项目目录
cd douyin

# 安装依赖
npm install

# 启动服务
npm run serve

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

问题反馈

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

MIT许可协议

MIT

声明

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

Copyright (c) 2021 ttentau