<p align="center">
   <img src="https://badgen.net/github/stars/ttentau/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/ttentau/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)搭建。相信不管你是处于哪个段位的攻城狮，本项目都能帮助到你。

## 核心技术拆解

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

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

## 预览图

[在线预览地址1](放个gitee的地址，快得多)
[在线预览地址2](http://douyin.ttentau.top)

## 功能点

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

## 运行

```bash
# 克隆项目到本地
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](https://github.com/ttentau/douyin/blob/vue3-vite/LICENSE)

## 声明

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

Copyright (c) 2021 ttentau

