Vue.js 制作抖音短视频多端APP 实战视频教程

前端开发

课程简介

已有 0 人浏览发布 2026-09-15 更新 2026-09-15

这套教程的主题很明确：用 Vue.js 做一款模仿抖音的短视频应用，并且要能打包到多个端上跑。它不是那种只讲几个 API 就收尾的演示课，而是把「短视频」这个具体业务场景拆开，从页面结构、数据流、交互细节一路做到多端构建。下面从技术栈、项目结构、可复用模块和自学方式几个角度说说这份资料该怎么用。

技术栈与它真正覆盖的范围

前端以 Vue.js 为核心，配套的必然是单文件组件、路由、状态管理这一套工程化组合。做抖音类应用，绕不开几个典型问题：视频列表的无限滚动、播放器的挂载与销毁、手势滑动切页、点赞评论的即时反馈、以及移动端适配。教程的价值就在于把这些点放进一个真实业务里讲，而不是孤立地演示某个库的用法。

需要提前说明的是，课程线索里提到涉及 Java 后端与短视频运营的内容。如果你只想学前端的界面与交互，可以聚焦 Vue 相关的章节；如果你需要一套能跑通的完整链路，后端接口部分就值得跟着搭一遍。两种学法都成立，关键是先想清楚自己要的是「界面实现参考」还是「端到端跑通」。

项目结构：照着搭一遍比看十遍有用

短视频类应用的目录划分其实很有规律：视图层、可复用组件、状态模块、接口请求层、静态资源与工具函数各占一块。教程里如果把这层结构讲清楚了，你完全可以对照着自己项目做一次目录重构。建议在动手时准备两份代码：一份完全跟着教程敲，保证能跑；另一份按自己的命名和分层习惯重写，用来验证是不是真的理解了模块边界。

多端这一块是重点也是坑点。同一套业务代码要适配不同端的渲染与构建配置，通常会有平台差异文件、条件编译或者构建脚本的区分。看教程时别只记结论，注意它怎么处理平台特有的 API 差异，这个思路比具体某个配置项更耐用。

可以抽出来复用的模块

视频播放组件：播放、暂停、进度、全屏与页面切换时的状态回收，是短视频应用里最值得单独维护的部分。
列表与手势交互：滑动切页、上拉加载、下拉刷新，这类逻辑封装好了，换个业务照样能用。
状态管理模块：用户信息、点赞收藏、播放记录，要区分哪些是全局状态、哪些是组件内部状态。
请求层与错误处理：统一拦截、加载态、失败重试，这部分做扎实，后面的页面开发会省很多事。
构建与多端适配配置：把差异集中在配置层，业务代码尽量保持干净。

这几块如果你在跟做过程中单独抽成小仓库，价值会比整套代码堆在一起更高，面试或接私活时也拿得出手。

怎么用它自学更有效

别按播放顺序无脑刷。更实际的做法是：先快速过一遍整体结构和最终效果，心里有个地图；然后以模块为单位精看，看一个模块就自己复现一个，复现不出来再回去看对应片段。每完成两三个模块，写一份自己的小结，记录踩到的坑和当时的解决思路，这份记录比课程本身的笔记对你更有用。

最后建议做一次「去教程化」的练习：关掉视频，只用自己写的笔记，把核心页面和交互重新搭一遍。能独立跑通，说明这套资料真正被你消化了；跑不通的地方，恰好就是还需要回看的位置。以这个标准来用这门课，它就不是看一遍就过的视频，而是一份能反复对照的工程参考。

6366ce38ef144a458e3e3101b82579f8.webp (28.06 KB, 下载次数: 57) 下载附件   保存到相册 2021-1-19 02:55 上传

课程推荐

《Vue.js 制作抖音短视频多端APP 实战视频教程》6366ce38ef144a458e3e3101b82579f8.webp (28.06 KB, 下载次数: 57) 下载附件   保存到相册 2021-1-19 02:55 上传【技能收获】学完可掌握：Java 后端开发、Vue / 前端工程化、短视频 / 自媒体运营。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（88 节）

* 课时1：课程介绍.mp4

* 课时2：使用Vue编程一个Hello World.mp4

* 课时3：开发TodoList.mp4

* 课时4：MVVM模式.mp4

* 课时5：项目组件化.mp4

* 课时6：简单的组件间传值.mp4

* 课时7：vue实例.mp4

* 课时8：vue实例生命周期钩子.mp4

* 课时9：vue的模板语法.mp4

* 课时10：计算属性，方法和监听器.mp4

* 课时11：计算属性的setter和gettrer.mp4

* 课时12：vue中的样式绑定.mp4

* 课时13：vue中的条件渲染.mp4

* 课时14：vue列表渲染.mp4

* 课时15：组件使用细节点.mp4

* 课时16：父子组件传值.mp4

* 课时17：组件参数校验.mp4

* 课时18：给组件绑定原事件.mp4

* 课时19：非父子组件传值.mp4

* 课时20：vue中使用插槽.mp4

* 课时21：vue中作用域插槽.mp4

* 课时22：vue的动态组件.mp4

* 课时23：vue中css动画原理.mp4

* 课时24：vue中使用animate.css库.mp4

* 课时25：vue中同时使用过渡和动画.mp4

* 课时26：Vue中js动画与velocity.js的结合.mp4

* 课时27：Vue中多个元素或组件过渡.mp4

* 课时28：Vue中的列表过渡.mp4

* 课时29：Vue中的动画封装.mp4

* 课时30：环境搭建.mp4

* 课时31：搭建一个新的项目.mp4

* 课时32：初始化文件介绍.mp4

* 课时33：vue中的路由.mp4

* 课时34：导航栏布局.mp4

* 课时35：vue中的嵌套路由.mp4

* 课时36：首页头部布局.mp4

* 课时37：iconfont图标的使用.mp4

* 课时38：创建推荐视频列表组件并配置路由.mp4

* 课时39：vue中swiper的使用.mp4

* 课时40：vue中video.js的运用.mp4

* 课时41：推荐页面布局完善.mp4

* 课时42：头像的制作与旋转动画的实现.mp4

* 课时43：完善首页视频列表（列表渲染）.mp4

* 课时44：为视频列表添加事件.mp4

* 课时45：在vue中使用模拟的json数据.mp4

* 课时46：vue中使用axios请求数据.mp4

* 课时47：vue中使用vue.config.js.mp4

* 课时48：视频列表首个视频自动播放.mp4

* 课时49：城市定位模块布局.mp4

* 课时50：城市切换组件布局.mp4

* 课时51：添加城市列表组件.mp4

* 课时52：利用axios请求城市数据.mp4

* 课时53：better-scroll的使用.mp4

* 课时54：字母表触摸事件.mp4

* 课时55：vuex的使用.mp4

* 课时56：城市组件分类布局.mp4

* 课时57：城市组件视频列表部分布局.mp4

* 课时58：关注页面头部开发.mp4

* 课时59：关注页面列表组件布局.mp4

* 课时60：完善关注页面列表组件.mp4

* 课时61：vue中的路由传参及keep-alive的使用.mp4

* 课时62：创建消息页面并对头部进行布局.mp4

* 课时63：消息页面图标布局.mp4

* 课时64：消息列表布局.mp4

* 课时65：利用列表渲染消息页面.mp4

* 课时66：创建个人信息页面.mp4

* 课时67：用户信息组件布局.mp4

* 课时68：作品列表布局.mp4

* 课时69：动态渲染作品列表.mp4

* 课时70：个人页面动态列表开发.mp4

* 课时71：视频播放页面开发.mp4

* 课时72：用户名片页面开发.mp4

* 课时73：添加首页点赞关注效果和滚动展示动画.mp4

* 课时74：评论界面开发.mp4

* 课时75：评论界面布局.mp4

* 课时76：添加关闭评论界面事件.mp4

* 课时77：使用vshare添加分享功能.mp4

* 课时78：完善分享页面.mp4

* 课时79：完善用户信息页面.mp4

* 课时80：解决移动端屏幕缩放问题.mp4

* 课时81：项目前后端联调.mp4

* 课时82：真机测试.mp4

* 课时83：项目套壳打包.mp4

* 课时84：章节介绍.mp4

* 课时85：创建数据库.mp4

* 课时86：配置java环境.mp4

* 课时87：下载Tomcat和eclipse.mp4

* 课时88：通过axios调用后台接口.mp4