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

这篇具有很好参考价值的文章主要介绍了用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/#/

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!文章来源地址https://www.toymoban.com/news/detail-844272.html

到了这里,关于用Vue仿了一个类似抖音的App的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • IOS 类似抖音下拉刷新与自定义上拉加载

    IOS 类似抖音下拉刷新与自定义上拉加载 首先考虑在UICollection与拖动手势之间的问题。 解决UICollectionView上添加手势不能触发。 这里使用了子类继承UICollectionView 在View上添加拖动手势 self.startPoint = CGPointZero; self.isInLoading = NO; 处理手势判断 // 给加的手势设置代理, 并实现此协议

    2024年02月09日
    浏览(38)
  • uni-app/vue 文字转语音朗读(附小程序语音识别和朗读)uniapp小程序使用文字转语音播报类似支付宝收款播报小程序语音识别和朗读)

    uni-app/vue 文字转语音朗读(小程序语音识别和朗读) 一、第一种方式:直接加语音包 固定的文本 先利用工具生成了 文本语音mp3文件,放入项目中,直接用就好了 这里用到的工具:知意配音 链接地址:https://peiyin.wozhiyi.com/newproduction.html 接下来,代码部分。 在min.js文件里加

    2024年02月07日
    浏览(60)
  • 新接手一个业务系统,我是这么熟悉的

    接二连三地背锅让小猫的内心受到了前所未有的打击。这也是他职业生涯中的第一次。感兴趣的伙伴们如果想了解一下小猫怎么了,可以看一下“幂等事件”以及“缓存击穿事件”。 这天组长找小猫来到了一间会议室。 “在这么短的时间内发生了这么多的事故,我想也你心

    2024年01月21日
    浏览(39)
  • Vue3.2+TS在v-for的时候,循环处理时间,将其变成xx-xx-xx xx:xx:xx格式,最后教给大家自己封装一个时间hooks,直接复用

    Vue3.2+TS在v-for的时候,循环处理时间,将其变成xx-xx-xx xx:xx:xx格式 最后教给大家自己封装一个时间hooks,直接复用 1.没有封装,直接使用 假如我们现在其他地方还需要用到这个,那么我们可以把这个方法封装成一个hooks,用以复用 1.在src目录下,新建一个utils文件夹,定义一个

    2024年02月13日
    浏览(39)
  • 我是如何在react中把一个集成了html,css的内容放到页面中的

    首先把html,css内容进行一个变量化,然后利用useState()去初始化一个变量,最后同通过一个标签属性就好了dangerouslySetInnerHTML={变量} 通过这样我把 typora 导出的 html 就可以直接放到上面展示了。

    2024年02月05日
    浏览(56)
  • 分享一个403界面给大家

    先看效果图(说明:小鬼影会飘来飘去,长时间停留会有小惊喜,具体大家跑一下就知道): 代码如下: PS:发现我用文字写太生硬了,干的噎嗓子,干脆在代码里加注释了。

    2024年02月06日
    浏览(45)
  • 分享一个500页面给大家

    先看效果: 再看代码:

    2024年02月06日
    浏览(52)
  • 写了一个 SRE 调试工具,类似一个小木马

    远程操作机器有时会比较麻烦,我写了一个工具,主要功能:1.远程执行命令 2.上传下载文件。是一个 Web Server,通过 HTTP 请求来操作机器,类似一个小木马。当然,因为是一个 Web Server,所以也提供了打印 HTTP 请求的能力,方便调试 Webhook 场景。下面给大家演示一下。 工具代

    2024年04月22日
    浏览(56)
  • 抖音数字人主播app

        抖音数字人主播app是指一款利用计算机生成的虚拟数字人,在抖音平台上进行实时音视频传输和互动的应用程序。该软件可以让用户创建自己的虚拟数字人,并在抖音平台上进行实时互动和交流。     抖音数字人主播app通常需要包含以下功能:     3D建模和动画制作:用

    2023年04月20日
    浏览(32)
  • 【ChatGPT】开源软件:ChatALL —— 我是 GitHub 榜一!(PS: 其实,小编本地 build run 了一下,就是一个组装 Chat UI ……)

    给第一次听说 ChatALL 的朋友介绍下它吧。很简单,它就是个 能让你同时和 ChatGPT、Bing Chat、Bard、文心一言、讯飞星火、Claude、HuggingChat、Alpaca, Vincuna、MOSS、ChatGLM 聊天的工具,帮你快速找到最靠谱的答案。 Concurrently chat with ChatGPT, Bing Chat, bard, Alpaca, Vincuna, Claude, ChatGLM, MOSS,

    2024年02月07日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包