用Vue仿了一个类似抖音的App

大家好,我是 Java陈序员

今天,给大家介绍一个基于 Vue3 实现的高仿抖音开源项目。

关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

douyin —— 一个基于 Vue、Vite 实现,模仿抖音的移动端短视频项目。

这个项目的作者原本是用来学习 Vue 练手的,经过不断的优化更新,目前已经达到官方 App 的 80% 了。真乃我辈楷模!

项目地址:

https://github.com/zyronon/douyin

在线访问:

https://dy.ttentau.top/home

如果是 PC 浏览器浏览访问,请用手机模式。先按 F12 调出控制台,再按 Ctrl + Shift + M 切换到手机模式。

项目截图

PS:大家都知道视频中的网红是谁嘛?

本地部署

环境准备: 该项目是基于 Vue 开发的,需要 Node 环境来运行。

1、安装 NodeJS,参考官方文档

2、安装 pnpm 包管理工具

npm install -g pnpm

3、拉取项目代码

git clone https://github.com/zyronon/douyin.git

4、进入项目根目录并安装依赖

cd douyin
pnpm install

5、启动项目

pnpm run dev

6、浏览器访问

http://localhost:3000

最后

推荐的开源项目已经收录到 GitHub 项目,欢迎 Star

https://github.com/chenyl8848/great-open-source-project

或者访问网站,进行在线浏览:

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现一个App需要考虑到很多因素,例如乐的播放、列表的展示、搜索功能、歌词显示等等。下面我将简单介绍如何使用Vue实现一个基础版的App。 1. 准备工作 首先,我们需要准备好一些必要的资源,例如乐文件、歌词文件、图片等等。这些资源可以放在静态资源目录中,例如public目录。 2. 创建Vue项目 使用Vue CLI创建一个新的项目: ``` vue create music-app ``` 创建完成后,进入项目目录并启动开发服务器: ``` cd music-app npm run serve ``` 3. 编写页面结构 创建一个乐列表页面和一个歌曲详情页面,可以使用Vue Router进行路由管理。页面中需要展示乐列表、歌曲封面、歌曲名称、歌手、歌词等信息。 4. 实现乐播放 使用HTML5的audio标签进行乐播放,同时使用Vue的生命周期钩子函数和watch监听乐播放状态,实现播放、暂停、上一首、下一首等功能。 5. 实现搜索功能 使用Vue的computed属性和watch监听搜索关键词的变化,实现搜索功能。同时可以使用第三方API获取搜索结果。 6. 实现歌词显示 使用第三方库实现歌词解析和显示,例如lyric-parser和lyric-scroll。 7. 发布项目 完成开发后,使用npm run build命令进行打包,然后将打包后的文件部署到服务器上即可。 以上是实现一个App的基本步骤,具体实现过程中还需要考虑到很多细节问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值