105 lines
2.6 KiB
Markdown
105 lines
2.6 KiB
Markdown
<p align="center">
|
||
<img src="https://badgen.net/github/stars/zyronon/douyin" alt="Star">
|
||
<a href="https://github.com/vuejs/vue">
|
||
<img src="https://img.shields.io/badge/Vue-3-brightgreen.svg" alt="Vue">
|
||
</a>
|
||
<a href="https://cn.vitejs.dev">
|
||
<img src="https://img.shields.io/badge/vite-2-brightgreen.svg" alt="Vant-ui">
|
||
</a>
|
||
<a href="http://mockjs.com">
|
||
<img src="https://img.shields.io/badge/mockjs-brightgreen.svg" alt="easymock">
|
||
</a>
|
||
<a href="https://github.com/Geek-James/ddBuy/blob/master/LICENSE">
|
||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||
</a>
|
||
</p>
|
||
|
||
简体中文 | [English](https://github.com/zyronon/douyin/vue3-vite/README.en.md)
|
||
|
||
# 此代码仅供学习，请勿用于商业用途
|
||
|
||
|
||
## 简介
|
||
|
||
**douyin** 是一个模仿抖音的移动端短视频项目，它基于 [vue 3](https://v3.cn.vuejs.org/),
|
||
[vite 2](https://cn.vitejs.dev/)
|
||
实现。使用了最新的Vue全家桶技术栈，后台数据通过[mock-js](http://mockjs.com)搭建。相信不管你是处于哪个段位的工程师，本项目都能帮助到你。
|
||
|
||
## 核心技术拆解（TODO）
|
||
|
||
- 手机端抓包
|
||
- 首页无限滚动
|
||
- me页面滚动逻辑
|
||
- 通话进入和挂起动画
|
||
|
||
欢迎提Bug,如有新的需求和想法，欢迎 issue 和 pr
|
||
|
||
## 预览
|
||
### 电脑端请用Chrome手机模式访问
|
||
### 手机请安卓Via浏览器预览。其他浏览器检测到页面内有视频会强制将视频全屏，并显示控制按钮，导致css和js都失效；后面可能考虑用app套个壳，至少在手机上能正常显示
|
||
[在线预览地址1](http://ttentau.top/dy/)
|
||
[在线预览地址2](http://ttentau.top/dy/)
|
||
|
||
|
||
## 功能点
|
||
|
||
页面|进度
|
||
---|---
|
||
首页|50%
|
||
-- 音乐|☑
|
||
-- 抖音音乐榜|☑
|
||
-- 搜索|50%
|
||
-- 直播|50%
|
||
朋友|0%
|
||
消息|☑
|
||
-- 聊天|☑
|
||
-- 各种通知|☑
|
||
我|90%
|
||
-- 求更新|☑
|
||
-- 关注和粉丝|☑
|
||
-- 编辑资料|☑
|
||
-- 添加朋友|☑
|
||
-- 我的音乐|☑
|
||
-- 抖音商城|0
|
||
-- 收藏视频\音乐|☑
|
||
-- 右侧菜单子页面|10%
|
||
-- 设置|☑
|
||
-- -- 具体设置页面|0%
|
||
登录\注册|☑
|
||
|
||
## 运行
|
||
|
||
```bash
|
||
# 克隆项目到本地
|
||
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](LICENSE)
|
||
|
||
## 声明
|
||
|
||
本项目仅做技术交流和学习，请勿用于商业目的！
|
||
|
||
Copyright (c) 2021 zyronon
|
||
|