用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/#/

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/589594.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【软件工程】详细设计(二)

这里是详细设计文档的第二部分。前一部分点这里 4. 学生端模块详细设计 学生端模块主要由几个组件构成:学生登录界面,成绩查询界面等界面。因为学生端的功能相对来说比较单一,因此这里只给出两个最重要的功能。 图4.1 学生端模块流程图 4.…

女大三抱金砖?看完这篇起诉状就明白:猜疑乃婚姻之大敌

女大三抱金砖?看完这篇起诉状就明白:猜疑乃婚姻之大敌 阿勇与阿芳,一对年过四十的夫妻,且有一对已成年的儿女,如今走到了婚姻的尽头。原告阿勇指控双方感情早已破裂,受父母包办婚姻影响,两人经常…

应用方案D78040场扫描电路,偏转电流可达1.7Ap-p,可用于中小型显示器

D78040是一款场扫描电路,偏转电流可达1.7Ap-p,可用于中小型显示器。 二 特 点 1、有内置泵电源 2、垂直输出电路 3、热保护电路 4、偏转电流可达1.7Ap-p 三 基本参数 四 应用电路图 1、应用线路 2、PIN5脚输出波形如下:

makefile01

什么是makefile Makefile 文件描述了 Linux 系统下 C/C 工程的编译规则,它用来自动化编译 C/C 项目。一旦写编写好 Makefile 文件,只需要一个 make 命令,整个工程就开始自动编译,不再需要手动执行 GCC 命令。一个中大型 C/C 工程…

Unity类银河恶魔城学习记录12-2 p124 Character Stats UI源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI_Statslot.cs using System.Collections; using System.Collections.Gen…

云计算的安全需求

目录 一、概述 二、云安全服务基本能力要求 三、信息安全服务(云计算安全类)资质要求 3.1 概述 3.2 资质要求内容 3.2.1 组织与管理要求 3.2.2 技术能力要求 四、云安全主要合规要求 4.1 安全管理机构部门的建立 4.2 安全管理规范计划的编制 4…

回溯算法|78.子集

力扣题目链接 class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(vector<int>& nums, int startIndex) {result.push_back(path); // 收集子集&#xff0c;要放在终止添加的上面&#xff0c;否则会漏掉自…

linux 回收站机制(笔记)

Linux下回收站机制https://mp.weixin.qq.com/s/H5Y8VRcaOhFZFXzR8yQ7yg 功能 &#xff1a;设立回收站&#xff0c;并且可定时清空回收站。 一、建议将alias rm 改成别的。 比如alias rmm &#xff0c;同时修改rm -rf ~/.trash/* 改成 rmm -rf ~/.trash/* 不然影响rm 的正常使…

Axure案例分享—垂直手风琴(附下载地址)

今天分享的案例是Axure8(兼容9和10)制作的垂直手风琴 一、功能介绍 折叠或展开多个面板内容&#xff0c;默认为展开一项内容&#xff0c;点击任一收起的选项&#xff0c;展开面板&#xff0c;其他面板收起二、制作过程 原型是由矩形组件以及动态面板构成&#xff0c; 拖入一…

黑马点评项目笔记 I

短信登录 将逻辑过期时间写入redis里面 Slf4j RestController RequestMapping("/user") public class UserController {Resourceprivate IUserService userService;Resourceprivate IUserInfoService userInfoService;/*** 发送手机验证码*/PostMapping("code&…

HarmonyOS 应用开发之非线性容器

非线性容器实现能快速查找的数据结构&#xff0c;其底层通过hash或者红黑树实现&#xff0c;包括HashMap、HashSet、TreeMap、TreeSet、LightWeightMap、LightWeightSet、PlainArray七种。非线性容器中的key及value的类型均满足ECMA标准。 HashMap HashMap 可用来存储具有关联…

TSINGSEE青犀推出河道/河湖/水域治理视频AI智能解决方案

一、方案背景 “十四五”时期&#xff0c;在面源污染防治等方面实现突破&#xff0c;实现主要水污染排放总量持续减少&#xff0c;水生态环境持续改善等任务艰巨。进一步完善流域综合治理体系&#xff0c;提升流域水环境综合治理能力和水平&#xff0c;更好适应新阶段发展需求…