企业官网建设流程全解析

用 Vue3 和 Pinia 复刻一个抖音风短视频应用：douyin-vue 快速上手指南

【免费下载链接】douyinVue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin

douyin-vue 是一个仿抖音（TikTok）的移动端短视频项目，基于 Vue3、Vite 和 Pinia 实现。数据全部来自本地 mock，不需要后端，4 条命令即可跑起来一条能上下滑刷的短视频信息流。

从"做短视频 Demo"的痛点说起

想做一个短视频 App 演示，通常要处理三件事：返回视频列表的后端、真实的视频资源、移动端适配。任何一样缺失都跑不起来。douyin-vue 把这三样都省了：视频、用户、评论、商品数据全部打包在仓库里，clone 下来装好依赖就能启动。

4 步把项目跑起来

git clone https://gitcode.com/GitHub_Trending/do/douyin cd douyin npm install npm run dev

浏览器访问 http://127.0.0.1:3000。有两个前置条件要注意：仓库必须用 git clone 获取，直接下载 zip 无法运行；项目是移动端优先设计，PC 上需按 F12 打开控制台，再按 Ctrl+Shift+M 切到手机模式，否则排版会错乱。

技术细节里值得抄的三处

本地 mock 接口。src/mock/index.ts 用 axios-mock-adapter 拦截了所有 axios 请求：推荐流/video/recommended/从本地数据文件切片返回，评论接口按视频 id 读取 public/data/comments/ 下 16 组数据，用户视频列表读取 public/data/user_video_list/ 下 13 组数据。前端按真实后端方式写请求，之后接真接口时业务代码几乎不用改。

Pinia 只管一个 store。src/store/pinia.ts 里只有一个 useBaseStore，集中管理用户信息、好友列表、屏幕尺寸和弹层状态。页面组件不层层传参，直接从 store 取值，新人读起来负担小。

信息流是拆开做的。首页信息流在 src/pages/home/slide/ 目录下，竖滑、横滑、长视频、社区分别独立成组件。无限下滑靠自定义轮播实现，对照几个 Slide*.vue 就能看懂整个 feed 的组装顺序。

适合谁，不适合谁

它适合前端新手学习 Vue3 移动端实践，尤其想细看滑动 feed、评论页、用户主页这些交互细节的人。

两点局限要说清。第一，README 明确标注仅供学习和研究，不得商用，许可协议是 GPL。第二，没有真实账号体系，登录、发布都是演示效果，别指望拿它当产品底座。

小结

douyin-vue 是一个能完整跑通、结构直白的仿抖音样例，适合当学习 Vue 移动端实践的入口。建议下一步：打开 src/pages/home/slide/ 目录，先搞清楚竖滑信息流是怎么一块块拼起来的。

【免费下载链接】douyinVue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin