Vue3 + Pinia 仿抖音,Vue 在移动端的最佳实践 . Imitate TikTok ,Vue Best practices on Mobile
Go to file
2024-04-27 18:03:09 +00:00
.github refactor: update workflow 2024-04-20 17:00:47 +08:00
.husky feat: add 2024-04-05 02:25:00 +08:00
docs refactor: update README.md 2024-04-26 10:12:43 +08:00
env refactor: Compress pictures and evade some pages censorship 2024-04-20 03:08:51 +08:00
node refactor: update workflow 2024-04-20 16:07:09 +08:00
public fix: fixed bug that occasionally slipped to trigger click events, update the first six recommended videos, add gitee judgment, do not load 7z files without gitee 2024-04-28 01:54:56 +08:00
src fix: fixed bug that occasionally slipped to trigger click events, update the first six recommended videos, add gitee judgment, do not load 7z files without gitee 2024-04-28 01:54:56 +08:00
.eslintrc.cjs feat: add typescript support 2024-04-06 02:35:49 +08:00
.gitignore feat: add typescript support 2024-04-06 02:35:49 +08:00
.prettierrc.json pretty再次格式化所有文件 2024-04-02 15:40:18 +08:00
CNAME Create CNAME 2024-04-20 15:17:58 +08:00
commitlint.config.ts refactor: format code 2024-04-06 02:46:14 +08:00
env.d.ts refactor: solve the mute problem 2024-04-27 02:31:27 +08:00
index.html feat: add typescript support 2024-04-06 02:35:49 +08:00
LICENSE docs: update readme.md 2024-04-05 14:30:04 +08:00
netlify.toml 添加netlify缓存配置 2024-04-03 23:51:47 +08:00
package.json refactor: remove mitt lib 2024-04-27 12:43:51 +08:00
pnpm-lock.yaml refactor: remove mitt lib 2024-04-27 12:43:51 +08:00
README.en.md docs: Added README."en".md translation via https://github.com/dephraiim/translate-readme 2024-04-27 18:03:09 +00:00
README.md docs: update README.md 2024-04-28 02:02:03 +08:00
tsconfig.app.json refactor: solve the mute problem 2024-04-27 02:31:27 +08:00
tsconfig.json feat: add typescript support 2024-04-06 02:35:49 +08:00
tsconfig.node.json feat: add typescript support 2024-04-06 02:35:49 +08:00
vercel.json fix: vercel&netlify refresh error 2024-04-03 22:26:06 +08:00
vite.config.ts refactor: solve the mute problem 2024-04-27 02:31:27 +08:00

Douyin-Vue

English | Spanish | German | French | 简体中文 | 日本語

License

douyin-vueis a parody抖音|TikTokmobile short video project.Vueon mobile最佳实践, comparable to nativeApp 丝滑流畅的使用体验。使用了最新的 Vuetechnology stack, based onVue3Vite5Piniaaccomplish. The data is saved locally in the project throughaxios-mock-adapterThe library intercepts the API and returns local json data to simulate real backend requests.

Online access

Gitee pages:https://dy.ttentau.top/(It is recommended to visit this address in China)
Netlify:https://douyins.netlify.app/

douyin-vue] One:[200 lines of code to implement a carousel component similar to Swiper.js](https://juejin.cn/post/7360512664317018146)  
\[douyin-vue] Second:[Realize the "infinite sliding video" effect on Douyin](https://juejin.cn/post/7361614921519054883)  
More articles are in preparation...

## run

Note: This project is only suitable for study and research, not for commercial use

### Quickly deploy to Vercel

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)

### local development

```bash
git clone https://github.com/zyronon/douyin.git
cd douyin
npm install
npm run dev
```

Open your browser and visit:<http://127.0.0.1:3000>

**Note: You need to switch the browser to mobile mode, first press`F12`To bring up the console, press`Ctrl+Shift+M`to preview normally**

## Data Sources

The video comes from the following Douyin celebrities

-   `我是香秀 🐂🍺`:<https://v.douyin.com/iYRAPA2L/>
-   `杨老虎 🐯(磕穿下巴掉牙版)`:<https://v.douyin.com/iYRA56de/>
-   `条子`:<https://v.douyin.com/iYRAaqjr/>
-   `达莎 Digi`<https://v.douyin.com/iYRA6rwT/>
-   `小橙子`:<https://v.douyin.com/iYRAnudw/>
-   `南恬`:<https://v.douyin.com/iYRAbKm3/>
-   `小霸宠牛排 🥩`<https://v.douyin.com/iYRSosVB/>
-   `奶茶妹 ◕🌱`:<https://v.douyin.com/iYRACKhP/>
-   `我才是岚岚`:<https://v.douyin.com/iYRAQM1C/>
-   `周憬艺 ziran`:<https://v.douyin.com/iYRAQs4h/>
-   `刘思瑶 nice`:<https://v.douyin.com/iYRAaERn/>
-   `彭十六 elf`:<https://v.douyin.com/iYRAHrVG/>
-   `李子柒`:<https://v.douyin.com/iYRA5B88/>

Picture from Xiaohongshu public notes

The above content is all public information on the Internet

## Features and suggestions

The project is currently in the early stages of development, and new features are being added continuously. If you have any features or suggestions for the software, please feel free to contact us.`Issues`raised in
If you also like the design ideas of this software, please submit it`PR`, thank you very much for your support!

## contact me

You can contact my email<a href="mailto:zyronon@163.com">zyronon@163.com</a>

> Share my other open source projects:
>
> _[**Typing Word**- Vocabulary memorization software that can be used on the web~](https://github.com/zyronon/typing-word)<img src="https://img.shields.io/github/stars/zyronon/typing-word.svg?style=flat-square&label=Star&color=4285dd&logo=github" height="16px" />_  
> _[**Web Scripts**- Some useful Grease Monkey scripts~](https://github.com/zyronon/web-scripts)<img src="https://img.shields.io/github/stars/zyronon/web-scripts.svg?style=flat-square&label=Star&color=4285dd&logo=github" height="16px" />_

## agreement

[GPL](LICENSE)