首页 > 其他分享 >用Vue全家桶手工搓了一个类似抖音短视频的软件,全开源

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

时间:2024-04-09 19:29:40浏览次数:27  
标签:Vue 浏览器 项目 开源 抖音 pnpm

用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

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

标签:Vue,浏览器,项目,开源,抖音,pnpm
From: https://blog.csdn.net/qq490801481/article/details/137500488

相关文章

  • Sora开源平替 Stable Video Diffusion整合包
    Sora开源平替StableVideoDiffusion整合包StableVideoDiffusion,简称SVD,是一种基于人工智能技术的模型,由初创公司StabilityAI开发。它是基于之前发布的StableDiffusion文本转图片模型的延伸,能够通过现有的图片生成视频。这款模型在AI领域具有很大的应用潜力,可以为用户......
  • vue3 + typescript 检测高德地图类型
    在ts项目中使用高德地图,为了方便使用类型检测及类型提示,需引入高德地图的类型文件,操作如下:1、引入@amap/amap-jsapi-types插件npmi-S@amap/amap-jsapi-types2、新建类型文件types/index.d.tsimport'@amap/amap-jsapi-types';3、在tsconfig.json中配置:"include":[......
  • OpenAI的秘密武器、ChatGPT背后功臣RLHF,被开源了
    OpenAI的秘密武器、ChatGPT背后功臣RLHF,被开源了。来自HuggingFace、加拿大蒙特利尔Mila研究所、网易伏羲AILab的研究人员从零开始复现了OpenAI的RLHFpipeline,罗列了25个关键实施细节。最终成功展示了随着模型大小的增加,响应质量显著提升的scaling行为,其中2.8B、6.9B的P......
  • Vue中component lists rendered with v-for should have explicit keys异常
    在Vue.js中,当你在组件列表中使用v-for指令渲染多个组件时,每个组件元素都应当有一个明确的key属性。Vue.js引擎通过这个key来优化虚拟DOM的diff过程,提升页面更新效率,并确保状态保持一致。例如,如果你有这样的代码:Vue<ul><liv-for="iteminitems">{{......
  • 跨框架探索:React Redux 和 Vuex 对比分析快速掌握React Redux
    ReactRedux和Vuex都是前端状态管理库,分别用于React和Vue.js框架。它们都提供了一套规范的状态管理机制,帮助开发者更好地组织和管理应用状态。下面是它们的一些异同点:相同点:中心化状态管理:两者都提供了一个全局的存储中心,使得组件间状态共享变得简单。响应式:状......
  • VueJs使用axios上传文件
    html<inputtype="file"id="fileUploadEle"ref="fileUploadEle"style="display:none;"accept=".png,.jpg"@change="selectFile"/><labelfor="fil......
  • Vue3 给组件设置name
    在Vue3的<scriptsetup>模式下,往往会忽略name;但是在keep-alive等情况下又需要用到!方法1:<scriptlang="ts">exportdefault{name:"my-component"}</script><scriptlang="ts"setup>/*业务代码*/</script>方法......
  • vue canvas绘制信令图,动态显示标题、宽度、高度
    需求:1、 根据后端返回的数据,动态绘制出信令图2、根据 dataStatus返回值:0和1,判断文字内容的颜色,0:#000,1:red3.、根据lineType 返回值:0和1, 判断箭头线的显示是实线、虚线4、根据返回的文字内容的换行符:“\r\n”自动换行(这步比较难,得计算高度)最后的效果图大......
  • 【全开源】JAVA红娘婚恋相亲交友系统源码支持微信小程序+微信公众号+H5+APP
    JAVA红娘婚恋相亲交友系统源码:跨平台交友新纪元,微信小程序、公众号、H5、APP全覆盖在数字化浪潮汹涌的今天,婚恋相亲已不再是传统的线下模式所能满足。JAVA红娘婚恋相亲交友系统源码,以其卓越的跨平台特性和强大的功能优势,为您打造了一个全新的相亲交友体验。无论是微信小程序、......
  • 【全开源】JAVA上门家政服务系统源码微信小程序+微信公众号+APP+H5
    JAVA上门家政服务系统源码:一站式家政服务,微信小程序、公众号、APP、H5全平台覆盖,便捷生活触手可及在现代生活的快节奏中,人们对家政服务的需求日益旺盛。JAVA上门家政服务系统源码,以其高效、便捷的特性,结合微信小程序、公众号、APP和H5平台,为您打造了一站式的家政服务体验,让您......