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

大家好,我是 Java陈序员

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

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

项目介绍

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

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

项目地址:

arduino 复制代码
https://github.com/zyronon/douyin

在线访问:

arduino 复制代码
https://dy.ttentau.top/home

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

项目截图

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

本地部署

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

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

2、安装 pnpm 包管理工具

bash 复制代码
npm install -g pnpm

3、拉取项目代码

bash 复制代码
git clone https://github.com/zyronon/douyin.git

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

bash 复制代码
cd douyin
pnpm install

5、启动项目

bash 复制代码
pnpm run dev

6、浏览器访问

arduino 复制代码
http://localhost:3000

最后

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

bash 复制代码
https://github.com/chenyl8848/great-open-source-project

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

bash 复制代码
https://chencoding.top:8090/#/

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

相关推荐
Jolyne_几秒前
css实现圆柱体
前端·css·react.js
亦黑迷失7 分钟前
canvas + ts 实现将图片一分为二的功能,并打包发布至 npm
前端·typescript·canvas
....49212 分钟前
antvX6自定义 HTML 节点创建与更新教程
前端·html·antvx6
禹曦a15 分钟前
Web开发:常用 HTML 表单标签介绍
前端·html·web
姑苏洛言37 分钟前
如何让用户回到上次阅读的位置?——前端视角下的用户体验优化实践
前端
小王码农记41 分钟前
el-select组件与el-tree组件结合实现下拉选择树型结构框
javascript·vue.js·elementui
kovlistudio42 分钟前
红宝书第三十一讲:通俗易懂的包管理器指南:npm 与 Yarn
开发语言·前端·javascript·学习·npm·node.js
我爱吃干果1 小时前
ZoomCharts使用方法
前端·javascript·笔记·zoom
旧厂街小江1 小时前
LeetCode 第111题:二叉树的最小深度
前端·算法·程序员
&白帝&1 小时前
vue实现大转盘抽奖
前端·javascript·vue.js