用Vue全家桶手工搓了一个类似抖音短视频的软件,全开源

用Vue全家桶手工搓了一个类似抖音短视频的软件,全开源

软件简介
用Vue全家桶手工搓了一个高仿抖音,全开源

PC浏览器请用手机模式访问。先按F12调出控制台,再按Ctrl+Shift+M切换到手机模式,手机请用Via浏览器或者Chrome浏览器预览。其他浏览器会强制将视频全屏,导致样式都失效。

运行项目:

本项目是基于 Vue 开发的,需要 node 环境来运行。

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

  2. 安装 pnpm 包管理工具,运行 npm install -g pnpm 来安装

  3. 上传项目源码到项目根目录

  4. 进入项目目录cd douyin,在项目根目录下,运行pnpm install来下载依赖。

  5. 执行pnpm dev来启动项目,项目默认地址为http://localhost:3000

  6. 在浏览器中打开http://localhost:3000 来访问项目。 Chrome 切换成手机模式快捷键,先按 F12 调出控制台,再按 Ctrl+Shift+M(设备仿真模拟)

免责声明:

本项目仅适用于技术研究和分享,不得用于商业使用 作者:zyronon

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue的学习之旅-part4

Vue的学习之旅-part1 vue的自带指令v-if v-else-if v-else虚拟DOM的复用v-show 与 v-if 的不同之处:v-if v-show各自合适的使用位置: v-for 循环v-for 循环遍历 :key"item" 绑定key,区分循环的内容循环的应用: 前几篇博…

目标检测——色素性皮肤病数据集

一、重要性及意义 首先,色素性皮肤病变是一类常见的皮肤疾病,其发病率有逐年增高的趋势。这些病变可能由遗传或环境因素导致黑素细胞生成异常,如黑色素瘤等。黑色素瘤具有极高的恶性率和致死率,而且恶化可能性大,容易…

汇编——SSE打包整数

SSE也可以进行整数向量的加法,示例如下: ;sse_integer.asm extern printfsection .datadummy db 13 align 16pdivector1 dd 1dd 2dd 3dd 4pdivector2 dd 5dd 6dd 7dd 8fmt1 db "Packed Integer Vector 1: %d, %d, %d, %d",…

鸿蒙ArkTS开始实例:【canvas实现签名板功能】

使用ArkTS中的canvas实现签名板的功能,canvas画布大家都很熟悉,我们会用它经常实现一些画板或者图表、表格之类的功能。canvas签名板是我在开发APP过程中实现的一个功能,开发过程中也是遇到比较多的问题。我会按照以下几点来讲解开发整个过程…

面试算法-153-旋转图像

题目 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,…

计算机网络实验——学习记录四(TCP协议)

1. 打开TCP服务: nc -e /bin/sh -lv 4499 注释: (1)nc是Linux下启动通讯服务的命令; (2)-e表示在nc命令后再执行bin文件夹下的shell命令,启动shell命令会导致所有从TCP连接传递到…

JavaEE初阶——多线程(一)

T04BF 👋专栏: 算法|JAVA|MySQL|C语言 🫵 小比特 大梦想 此篇文章与大家分享多线程的第一部分:引入线程以及创建多线程的几种方式 此文章是建立在前一篇文章进程的基础上的 如果有不足的或者错误的请您指出! 1.认识线程 我们知道现代的cpu大多都是多核心…

【蓝桥杯嵌入式】第十三届省赛(第二场)

目录 0 前言 1 展示 1.1 源码 1.2 演示视频 1.3 题目展示 2 CubeMX配置(第十三届省赛第二场真题) 2.1 设置下载线 2.2 HSE时钟设置 2.3 时钟树配置 2.4 生成代码设置 2.5 USART1 2.5.1 基本配置 2.5.2 NVIC 2.5.3 DMA 2.6 TIM 2.6.1 TIM2 2.6.2 TIM4 2.6.3 …

ICP配准算法

配准算法 问题定义ICP(point to point)算法思想步骤分解point to point和point to plane的区别ICP配准算法的标准流程NDT 本篇将介绍配准算法,将介绍ICP(point to point)、ICP(point to plane)和NDT算法。其中ICP有两种,point to point表示通过构建点与点…

达梦备份与恢复

达梦备份与恢复 基础环境 操作系统:Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本:DM Database Server 64 V8 架构:单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…

NzN的数据结构--二叉树part1

你叉叉,让你学数据结构你不学;你叉叉,让你看二叉树你不看。 今天我们来一起学习二叉树部分,先赞后看是好习惯。 一、树的概念及结构 1. 树的概念 树是一种非线性的数据结构,它是由n(n>0)个有…

阿里云服务器可以干什么?阿里云服务器主要用途是干嘛的?

阿里云服务器可以干嘛?能干啥你还不知道么!简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等,阿里云百科aliyunbaike.com整理阿里云服务器的用途: 阿里云服务器活动 aliyunbaike.com…

SpringCloud Alibaba Sentinel 规则持久化

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅,从传统的模块之间调用,一步步的升级为 SpringCloud 模块之间的调用,此篇文章为第十七篇,即使用 Sentinel 实现规则持久化。 二、概述 从前面我们做的实验可知,…

4/7 QT_day1

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {//窗口设置this->setWindowTitle("小黑子(little black son)");this->setWindowIcon(QIcon("D:\\qq文件\\Pitrue\\pictrue\\black.jpg"));this-&g…

【数据结构与算法】:快速排序和冒泡排序

一,快速排序 快速排序是一种比较复杂的排序算法,它总共有4种实现方式,分别是挖坑法,左右"指针"法,前后"指针"法,以及非递归的快速排序,并且这些算法中也会涉及多种优化措施…

Tokenize Anything via Prompting

SAM的延续,把SAM输出的token序列用来进行分类,分割和一个自然语言的decoder处理,但其实现在多模态的图像的tokenizer也几乎都是用VIT来实现的。一开始认为这篇文章可能是关于tokenize的,tokenize还是很重要的,后来看完…

若依框架学习——分页查询列表

条件查询【多条件】列表展示【分页】SaCheckPermissionTableName TableId NotBlank Page分页 响应数据封装类

JMeter+Ant+Jenkins构建接口报告(无人驾驶版)

展示结果: uc浏览器打开测试报告,绿色显示脚本结果 搭建操作步骤如下 1.jemter写好脚本 2.下载并配置ant环境变量:加上activation.jar、commons-lang3-3.8.1.jar、mail.jar 这3个包 mail.jar需要引用到jmeter 3.下载安装Jenkins 并进行构建…

CKA 基础操作教程(六)

Kubernetes Deployments 理论学习 在 Kubernetes 中,Deployments 是一种资源对象,用于定义和管理容器化应用程序的部署过程, 容器化应用的声明式定义:使用 Deployments ,可以声明性地定义应用程序的部署配置&#x…

Vue使用高德地图

1.在高德平台注册账号 2.我的 > 管理管理中添加Key 3.安装依赖 npm i amap/amap-jsapi-loader --save 或 yarn add amap/amap-jsapi-loader --save 4.导入 AMapLoade import AMapLoader from amap/amap-jsapi-loader; 5.直接上代码,做好了注释(初始化…