土老板要我开发个抖音软件?行,十分钟搞定~~~

职场   其他   2024-11-14 11:28   福建  
我那不懂技术的土老板突然心血来潮,突然有一天拍着桌子说:“小王,给我开发个抖音软件,明天就要!”🤣
我当时的表情,你们懂的,就是那种“你在逗我吗?”

还好我知道怎么上 Github,发现一个不能说很像,只能说一毛一样的项目 Douyin-Vue

douyin-vue 是一个开源项目,它是一个基于 Vue3 的仿抖音移动端项目 ,利用了 Vue3、Vite5 和 Pinia 等现代前端技术栈,实现了高度仿真的抖音移动端应用,为用户提供了接近原生 App 的流畅体验。
douyin-vue 项目使用 Vue3 构建,引入了 Composition API、Teleport 和 Fragments 等新特性,提高了开发效率和应用性能。
douyin-vue 采用 Vite5 作为构建工具,以快速编译和优化应用性能,项目还使用了 Pinia 作为状态管理库,管理全局状态如用户信息和视频列表。

开源地址:https://github.com/zyronon/douyin
在线地址:https://dy.ttentau.top/

项目特点:

  • 短视频播放:实现短视频循环播放,具备播放/暂停控制。

  • 评论与点赞功能:用户可以进行评论、点赞等互动。

  • 滑动切换视频:实现上下滑动切换视频的效果。

  • 动画效果:基于 CSS 和 JavaScript 动画实现页面过渡和按钮交互效果。

技术栈:
  • Vue 3:项目核心框架,提供组件化开发和响应式设计。

  • Vue Router:实现页面路由,管理不同视频页面的切换。

  • Pinia(或 Vuex):用于状态管理,跟踪用户的点赞、评论等信息。

  • Axios:处理 API 请求,实现前后端数据交互。

  • CSS Animation / JavaScript Animation:实现页面中的动画效果。


安装与使用
NPM 安装:
git clone https://github.com/zyronon/douyin.git cd douyinnpm installnpm run dev
安装成功后,就可以在浏览器中打开 http://127.0.0.1:3000 访问了。
注意:需要将浏览器切至手机模式。
先按 F12 调出控制台,再按 Ctrl+Shift+M 才能正常预览。

Docker 安装:

# pull Docker imagedocker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latestdocker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest

开源作者提醒:本项目仅适用于学习和研究,不得用于商业使用~~~


菜鸟教程
学的不仅是技术,更是梦想!
 最新文章