Vue3+pinia+Vant4做的移动端仿抖音短视频项目

已于 2025-03-08 14:17:42 修改
阅读量967 收藏 8
点赞数
分类专栏： Vue3 Pinia 文章标签： 前端 vue.js github javascript less
于 2023-05-11 14:52:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z010202/article/details/130621743
版权
本文介绍了使用Vue3、pinia和Vant4框架开发的移动端仿抖音短视频项目，适合初学者。作者分享了项目源码，提供了github和gitee的链接以及线上访问地址。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue3+pinia+Vant4做的移动端仿抖音短视频项目，视频素材是抖音上下载的

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第一次用Vue3写项目边写边学，适合初学者感兴趣的朋友可以到github或gitee上拉

项目地址

github：项目地址
gitee：项目地址

线上访问地址

https://qqshortvideos.rth2.xyz/
github：Q音
gitee：Q音 (已关闭)

vue3仿抖音视频滑动切换播放
03-20
vue3仿抖音视频滑动切换播放
vue-douyin：基于Vue.js的模仿抖音的Web App
02-03
低仿抖音短视频 该项目基本使用JavaScript（ES6 / 7）开发，逐步发展，选了《微视频社交网站的开发》这个主题作为毕业设计，然后就照着打算用自己自学的知识（前端方向）来实现一遍。 ，混入了Python写的爬虫来爬取的短视频来丰满自己的数据库。 注：本项目除外学习交流使用，切勿用于商业用途，如有违反第三方版权问题及时联系我 前端技术栈 Axios Vue2 威克斯 Vue路由器 Vue CLI 3 Vue-socket.io 触控笔 初步技术栈 koa2 续集 伊奥雷迪斯 套接字 项目运行 使用Docker： 自学docker时用这个项目精心实践，不用本地安装数据库啥的，（仅效果预览）推荐使用这种方法！！！ 首先安装，如果安装过就不需要了。 （方案1）自己重建，需要等待重新加载。终端在该项目目录下运行docker image build -t vue-douyin . （方案2）直接从dockerhub拉取到，需要等待中断。 docker pull asdwsx1234/vue-douyin （方案1）然后docker container run --rm -p
【UNIAPP】uniapp vue3的仿抖音下拉滚动点赞评论分享页面模板V2.0
最新发布
coder小龙
03-13 173
1.UI组件使用了tmui的弹窗（带模糊效果，可自行替换成自己的ui的弹窗）网址：（https://tmui.design/start/%E4%BB%8B%E7%BB%8D.html）2.UI组件也使用到了uv-ui，也可以把部分uv-开头的组件替换成自己的ui组件库，网站：（https://www.uvui.cn/components/input.html）里面有static是图片，videoPlayer.vue是组件 可以自行更换图片，组件复制进去 配好路由 就能用。5.左右拖拽移动视频播放进度。
用Vue仿了一个类似抖音的App
weixin_43400476的博客
04-03 655
douyin —— 一个基于 Vue、Vite 实现，模仿抖音的移动端短视频项目。
douyin-vue：使用Vue3、Pinia和Vite5打造高度还原的抖音仿制项目
chenchuang0128的博客
05-29 2967
douyin-vue是一个模仿抖音的移动端短视频项目，致力于提供媲美原生App的丝滑流畅体验。该项目采用了最新的Vue技术栈，包括Vue3、Vite5和Pinia等，确保了项目的先进性和可扩展性。同时，项目通过axios-mock-adapter库拦截API请求，并返回本地JSON数据，模拟了真实后端请求的过程，使得开发者能够在没有后端接口的情况下进行前端页面的开发和调试。在线访问链接【模仿抖音系列】一：200行代码实现类似Swiper.js的轮播组件【模仿抖音系列】二：实现抖音 “视频无限滑动“效果。
探索douyin-vue：一个基于Vue3的仿抖音移动端项目
chenchuang0128的博客
09-01 2327
摘要随着短视频平台的兴起，抖音（TikTok）已成为全球范围内备受欢迎的社交媒体应用之一。本文将介绍一个名为douyin-vue的开源项目，该项目通过Vue3、Vite5和Pinia等最新技术栈，成功模仿了抖音的移动端界面和功能，实现了高达90%的完成度。本文旨在分析该项目的技术架构、实现细节以及其在Vue移动端开发中的“最佳实践”，为前端开发者提供宝贵的参考和学习资源。
vue 仿照抖音视频效果（滑动切换）vant2
TwoBE9876的博客
03-15 3514
同时他也在 github 上发现一位大佬做的这种效果也特别好。那就学起来吧~~~~~~~~~~~~~~~~~~~~~~~这是大佬的主要代码，感兴趣的小伙伴可以去看看。看个效果图，再决定学不学。
Q音：Vue3+Pinia+Vue Router4+Vant4的移动端仿抖音短视频项目.zip(毕设&课设&实训&大作业&竞赛&
09-20
【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目...
vue3+Vant+pinia 开箱即用，移动端框架
01-30
vue3+Vant+pinia移动端框架： 1、已集成搭建适配方法：postcss-pxtorem || lib-flexible； 2、已安装最新路由搭建框架； 3、使用sass样式处理； 4、已集成nprogress进度条并全局配置； 5、安装最新pinia插件，配合...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant的电商管理系统源码
06-16
基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant的电商管理系统源码 项目经过严格测试，确保可以运行！ newbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理...
fangdouyin:vue仿抖音
05-11
vue仿抖音 2019年12月最新更新 新增留言功能，优化安卓微信环境境下播放不流畅问题 基本介绍 制作仿抖音视频列表遇到很多坑，特别是安卓微信内置浏览器，让人脑壳疼,核心代码不多 便于理解 图标css使用的事iconfot字体库，优化页面加载速度  组件用到了vant 中的swiper滑动组件 video原生参数介绍 h5 原生 video 属性 webkit-playsinline ios 小窗播放，使视频不脱离文本流，安卓则无效 微信内置x5内核， x5-video-player-type="h5-page" 启用H5播放器,是wechat安卓版特性，添加此属性，微信浏览器会自动将视频置为全屏 x5-video-player-fullscreen="true" 全屏设置，设置为 true 是防止横屏 x5-video-orientation 控制横竖屏 landscape 横屏，po
仿抖音上下滑动切换视频
06-25
仿抖音效果，上下滑动切换视频，每次滑动一页。使用RecyclerView ＋ Snaphelper实现，自定义LayoutManager。
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
10-16
uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。本文通过实例图文的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
vue3+ts+pinia+vant-项目搭建
cwjxyp的博客
07-31 1023
/src├── assets `静态资源，图片...`├── components `通用组件`├── router `路由`├── api `接口服务API`├── stores `状态仓库`├── styles `样式`├── types `TS类型`├── utils `工具函数`├── views `页面`├── main.ts `入口文件`└──App.vue `根组件`
vue 仿抖音视频列表（兼容微信内置X5浏览器）
热门推荐
superKM的博客
02-18 3万+
2019年12月最新更新 新增留言功能，优化安卓微信环境境下播放不流畅问题 项目GIT地址 https://github.com/superJinx/fangdouyin demo预览，请用微信扫描二维码 制作仿抖音视频列表遇到很多坑，特别是安卓微信内置浏览器，让人脑壳疼,核心代码不多便于理解 图标css使用的事iconfot字体库，优化页面加载速度htt...
vue3.0+vant3仿快手/抖音短视频|Vue3+Vite2聊天/直播实例
码农ICoding
02-02 6026
vue3.0-douyin 基于vue3.x开发仿抖音app界面小视频+直播聊天实例。 基于Vue3框架技术搭建一款仿抖音APP界面小视频+直播实战案例。运用到了vite2+vue3.0.5+vuex4+vue-router@4+vant3+v3popup等技术，实现了短视频滑动切换、暂停/迷你进度条、聊天评论/弹幕/送礼物等功能。 技术框架 技术/编码：vscode /vue3.0+vue-router+vuex4 UI组件库：vant3.x (有赞移动端vue3组件库) 弹层组件...
用Vue全家桶手工搓了一个高仿抖音，全开源
百创科技
04-03 304
用Vue全家桶手工搓了一个高仿抖音，全开源PC浏览器请用手机模式访问。先按F12调出控制台，再按Ctrl+Shift+M切换到手机模式，手机请用Via浏览器或者Chrome浏览器预览。其他浏览器会强制将视频全屏，导致样式都失效。用Vue全家桶手工搓了一个高仿抖音，全开源 - 百创网-源码交易平台_网站源码_商城源码_小程序源码本项目是基于 Vue 开发的，需要 node 环境来运行。1. 安装 NodeJS，参考官方文档。
Vue 开源版「抖音」，火了！
前端开发博客
04-28 1536
大家好，我是宝哥。在短视频平台日益流行的今天，抖音以其独特的算法和用户体验获得了巨大的成功。但你有没有想过，如果自己动手做一个类似的应用会是怎样的体验呢？今天宝哥就给大家带来一个基于Vue3 + Pinia + Vite5实现的仿抖音项目，它不仅在功能上做到了高度模仿，而且在代码结构和项目组织上也值得学习。项目简介该项目是一个开源的仿抖音应用，使用Vue3作为前端框架，Vite5作为构建工具，Pi...
前端：vue3+router+Axios+vant4+UI 后端springboot 移动端项目
12-29
### 使用 Vue3 + Vue Router + Axios + Vant4 构建前端 UI 并与 Spring Boot 后端集成 #### 安装依赖库 为了构建基于 Vue3 的移动端应用程序，首先需要安装必要的依赖包。 ```bash npm install vue@next vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值