diff --git a/README-en-US.md b/README-en-US.md index ac9001a..69a5f09 100644 --- a/README-en-US.md +++ b/README-en-US.md @@ -1,83 +1,64 @@ -### English | [简体中文](README.md) - -## Preview Demo -[Online Demo](http://dy.ttentau.top/) - -### Note: Please use mobile mode of Chrome browser to access the PC side. To switch Chrome to mobile mode, press F12 to bring up the console, then Ctrl+Shift+M -### Note: For Android phones please use [Via mobile browser](https://viayoo.com/zh-cn/) or Chrome mobile version preview. When other browsers detect a video on the page, they force the video to be in full screen and display the control button. As a result, both css and js are invalid -
- - - - - - - - -
+

+ Douyin +

+ +

+简体中文 | +English +

-## Introduction -**Douyin** is a mobile short video project imitating Tiktok,It is based on [vue 3](https://v3.cn.vuejs.org/), -[vite 2](https://cn.vitejs.dev/) -implementation。 -The latest Vue family bucket technology stack is used, and the background data is built through [mock-js](http://mockjs.com). +

+ douyin是一个模仿抖音的移动端短视频项目,它基于 Vue, +Vite实现。使用了最新的Vue全家桶技术栈,后台数据通过 +mock-js搭建 +

-## Function point +## 📸 在线访问 - Page | Progress ---------------|--------- - Home | 50% - -- Music | ☑ - -- 抖音音乐榜 | ☑ - -- Search | 50% - -- Live | 50% - Friend | 0% - Message | ☑ - -- Chat | ☑ - -- 各种通知 | ☑ - Me | 90% - -- 求更新 | ☑ - -- 关注和粉丝 | ☑ - -- 编辑资料 | ☑ - -- Add friend | ☑ - -- My music | ☑ - -- Shop | 0 - -- 收藏视频\音乐 | ☑ - -- 右侧菜单子页面 | 10% - -- Setting | ☑ - -- -- 具体设置页面 | 0% - Sign in\Sign up | ☑ +Vercel: (国内推荐访问这个) -## How to start +Netlify: (需要翻墙) -```bash -# Clone the project to local -git clone https://github.com/zyronon/douyin.git +**注意**:PC浏览器请用手机模式访问。先按F12调出控制台,再按Ctrl+Shift+M切换到手机模式 -# Enter the project directory -cd douyin +**注意**:手机请用[Via浏览器](https://viayoo.com/zh-cn/)或者Chrome浏览器预览。其他浏览器会强制将视频全屏,导致样式都失效 -# Install dependencies -npm install +## 🖼️ 效果截图 + +
+ + + + + + + + + + +
-# Start the service -npm run dev +## 运行项目 -# Visit -Chrome browser access http://localhost:5173 -Chrome switches to mobile mode by pressing F12 to bring up the console, then Ctrl+Shift+M +本项目是基于`Vue`开发的,需要 node 环境来运行。 -``` +1. 安装 NodeJS,参考[官方文档](https://nodejs.org/en/download) +2. 使用 `git clone https://github.com/zyronon/douyin.git` 下载项目到本地 +3. 进入项目目录` cd douyin `,在项目根目录下,运行`npm install`来下载依赖。 +4. 执行`npm run dev`来启动项目,项目默认地址为[`http://localhost:3000`](http://localhost:3000) +5. 在浏览器中打开[`http://localhost:3000`](http://localhost:3000) 来访问项目。 + Chrome切换成手机模式快捷键,先按F12调出控制台,再按Ctrl+Shift+M -## Contribution +## 🎙 功能与建议 -Feel free to contribute by opening issues with any questions, bug reports or feature requests. +目前项目处于开发初期,新功能正在持续添加中,如果你对软件有任何功能与建议,欢迎在 Issues 中提出 +如果你也喜欢本软件的设计思想,欢迎提交 pr,非常感谢你对我们的支持! -## Get in touch +## 联系我 -You can reach us at zyronon@163.com +您可以联系我的邮箱 zyronon@163.com -## License +## MIT许可协议 [MIT](LICENSE) diff --git a/README.md b/README.md index bdd6af6..9a7d123 100644 --- a/README.md +++ b/README.md @@ -1,83 +1,60 @@ -### 简体中文 | [English](README-en-US.md) +

+ Douyin +

-## 预览 +

+简体中文 | +English +

-[在线预览DEMO](http://dy.ttentau.top/) -#### 注意:电脑端请用Chrome浏览器的手机模式访问。Chrome切换成手机模式快捷键,先按F12调出控制台,再按Ctrl+Shift+M +

+ douyin是一个模仿抖音的移动端短视频项目,它基于 Vue, +Vite实现。使用了最新的Vue全家桶技术栈,后台数据通过 +mock-js搭建 +

-#### 注意:安卓手机请用[Via手机浏览器](https://viayoo.com/zh-cn/)或者Chrome浏览器手机版本预览。其他浏览器检测到页面内有视频会强制将视频全屏,并显示控制按钮,导致css和js都失效 +## 📸 在线访问 -
- - - - - - - - -
- -## 简介 - -**douyin** 是一个模仿抖音的移动端短视频项目,它基于 [Vue 3](https://v3.cn.vuejs.org/), -[Vite](https://cn.vitejs.dev/) -实现。使用了最新的Vue全家桶技术栈,后台数据通过[mock-js](http://mockjs.com)搭建 - -## 效果截图 +Vercel: (国内推荐访问这个) -## 功能点 +Netlify: (需要翻墙) - 页面 | 进度 ---------------|--------- - 首页 | 50% - -- 音乐 | ☑ - -- 抖音音乐榜 | ☑ - -- 搜索 | 50% - -- 直播 | 50% - 朋友 | 0% - 消息 | ☑ - -- 聊天 | ☑ - -- 各种通知 | ☑ - 我 | 90% - -- 求更新 | ☑ - -- 关注和粉丝 | ☑ - -- 编辑资料 | ☑ - -- 添加朋友 | ☑ - -- 我的音乐 | ☑ - -- 抖音商城 | 0 - -- 收藏视频\音乐 | ☑ - -- 右侧菜单子页面 | 10% - -- 设置 | ☑ - -- -- 具体设置页面 | 0% - 登录\注册 | ☑ +**注意**:PC浏览器请用手机模式访问。先按F12调出控制台,再按Ctrl+Shift+M切换到手机模式 -## 运行 +**注意**:手机请用[Via浏览器](https://viayoo.com/zh-cn/)或者Chrome浏览器预览。其他浏览器会强制将视频全屏,导致样式都失效 -```bash -# 克隆项目到本地 -git clone https://github.com/zyronon/douyin.git +## 🖼️ 效果截图 -# 进入项目目录 -cd douyin - -# 安装依赖 -npm install - -# 启动服务 -npm run dev +
+ + + + + + + + + + +
-# 访问 -Chrome浏览器访问 http://localhost:5173 -Chrome切换成手机模式快捷键,先按F12调出控制台,再按Ctrl+Shift+M +## 运行项目 -``` +本项目是基于`Vue`开发的,需要 node 环境来运行。 -## 问题反馈 +1. 安装 NodeJS,参考[官方文档](https://nodejs.org/en/download) +2. 使用 `git clone https://github.com/zyronon/douyin.git` 下载项目到本地 +3. 进入项目目录` cd douyin `,在项目根目录下,运行`npm install`来下载依赖。 +4. 执行`npm run dev`来启动项目,项目默认地址为[`http://localhost:3000`](http://localhost:3000) +5. 在浏览器中打开[`http://localhost:3000`](http://localhost:3000) 来访问项目。 + Chrome切换成手机模式快捷键,先按F12调出控制台,再按Ctrl+Shift+M -如果有任何问题、错误报告或功能请求,请随时提出Issues。 +## 🎙 功能与建议 +目前项目处于开发初期,新功能正在持续添加中,如果你对软件有任何功能与建议,欢迎在 Issues 中提出 +如果你也喜欢本软件的设计思想,欢迎提交 pr,非常感谢你对我们的支持! + ## 联系我 您可以联系我的邮箱 zyronon@163.com diff --git a/public/docs/1.gif b/public/docs/1.gif new file mode 100644 index 0000000..c82e0ca Binary files /dev/null and b/public/docs/1.gif differ diff --git a/public/docs/2.gif b/public/docs/2.gif new file mode 100644 index 0000000..1c7ee76 Binary files /dev/null and b/public/docs/2.gif differ diff --git a/public/docs/3.gif b/public/docs/3.gif new file mode 100644 index 0000000..7d29d0d Binary files /dev/null and b/public/docs/3.gif differ diff --git a/public/docs/4.gif b/public/docs/4.gif new file mode 100644 index 0000000..487446f Binary files /dev/null and b/public/docs/4.gif differ diff --git a/public/docs/5.gif b/public/docs/5.gif new file mode 100644 index 0000000..cfb1fd2 Binary files /dev/null and b/public/docs/5.gif differ diff --git a/public/docs/img-1.jpg b/public/docs/img-1.jpg new file mode 100644 index 0000000..165c8b3 Binary files /dev/null and b/public/docs/img-1.jpg differ diff --git a/public/docs/img-2.jpg b/public/docs/img-2.jpg new file mode 100644 index 0000000..59f6ad6 Binary files /dev/null and b/public/docs/img-2.jpg differ diff --git a/public/docs/img-3.jpg b/public/docs/img-3.jpg new file mode 100644 index 0000000..f0a173f Binary files /dev/null and b/public/docs/img-3.jpg differ diff --git a/public/docs/img-4.jpg b/public/docs/img-4.jpg new file mode 100644 index 0000000..3740b04 Binary files /dev/null and b/public/docs/img-4.jpg differ diff --git a/public/docs/img-5.jpg b/public/docs/img-5.jpg new file mode 100644 index 0000000..ceb7a45 Binary files /dev/null and b/public/docs/img-5.jpg differ