人工精选Vue.js 制作抖音短视频多端APP 实战视频教程
这门课的名字里有「抖音」和「多端 APP」，但真正要解决的问题比标题更具体：如何用 Vue 生态把一套短视频类界面同时跑到移动端和桌面端，并且让数据从接口到页面能完整跑通。如果你正在找一个能写进作品集的仿抖音项目，或者想搞清楚 Vue 在真实业务里怎么组织页面、路由和状态，这套资料有参考价值；如果你
会员可免费下载本篇月会员可免费领取。
开通会员 ›会员 · 按档位
游客按标价购买，不享受上表折扣。
支付成功后自动发放网盘链接，链接失效可找客服免费补
这门课的名字里有「抖音」和「多端 APP」，但真正要解决的问题比标题更具体：如何用 Vue 生态把一套短视频类界面同时跑到移动端和桌面端，并且让数据从接口到页面能完整跑通。如果你正在找一个能写进作品集的仿抖音项目，或者想搞清楚 Vue 在真实业务里怎么组织页面、路由和状态，这套资料有参考价值；如果你只是想看看短视频运营怎么做，它帮不上忙。
它对应的工作场景
课程围绕一个短视频应用展开，涉及的工作场景包括：首页视频流列表的渲染与滚动加载、视频播放页的布局与交互、用户主页与作品列表、以及移动端和桌面端两套界面的适配处理。这些场景在前端岗位的日常需求里出现频率很高，尤其是信息流类产品。学完之后，你至少能说清楚一个列表页从请求数据、处理分页、到渲染成卡片并支持点击跳转的完整链路是怎么写的。
需要提前说明的是，课程标题里出现「多端 APP」，但技术选型走的是 Vue 前端工程化方向，并不是用 Flutter 或 React Native 做原生打包。如果你的目标是上架应用商店，这套内容不覆盖原生打包发布环节；如果你的目标是理解跨端界面的组织方式、并产出可展示的前端项目，它是对口的。
学完能独立做什么
- 用 Vue 搭建一个包含首页、视频详情、个人主页的多页面应用，并配置好路由跳转与参数传递。
- 调用后端接口完成视频列表的获取、分页加载和状态管理，而不是把数据写死在页面里。
- 处理视频播放组件的基本控制，包括播放、暂停与切换，并让列表滚动和播放状态不互相干扰。
- 针对移动端和桌面端做基础的自适应布局，理解同一套逻辑如何在不同屏幕下呈现。
- 把项目拆成可复用的组件，而不是把所有代码堆在一个文件里。
这些产出足够支撑一次前端实习或初级岗位的作品展示，但不要指望学完就能独立负责一个完整商业项目——真实项目里的权限、异常处理和性能优化，课程只能覆盖基础部分。
资料适合什么基础
需要你已经会写 HTML 和 CSS，能看懂 JavaScript 的基本语法，比如函数、数组方法和对象操作。Vue 的部分是从基础讲起的，所以没接触过 Vue 也能跟上，但如果完全没写过前端代码，直接进入实战章节会比较吃力。后端接口部分课程有涉及，但重心在前端调用，不需要你精通后端语言。换句话说，这是一门前端方向的实战课，后端只是为了让数据跑通而存在的配角。
资料怎么用
建议按章节顺序走，先看基础概念部分把 Vue 的模板语法、组件通信和路由配置弄清楚，再进入项目实战。每完成两到三节，别急着往下看，自己动手把刚才那段代码重新写一遍，哪怕照着敲也比只看不写强。课程配套的笔记适合在学完一个模块后用来复盘，面试前翻一遍能快速回忆起项目结构。最后一步很关键：关掉视频，从零复现一遍核心页面，能独立写出首页列表和详情页跳转，这个项目才算真正属于你。如果时间有限，优先保证首页信息流和视频播放这两块跑通，其他页面可以按需补充。
6366ce38ef144a458e3e3101b82579f8.webp 下载附件 保存到相册 2021-1-19 02:55 上传
课程推荐
《Vue.js 制作抖音短视频多端APP 实战视频教程》6366ce38ef144a458e3e3101b82579f8.webp 下载附件 保存到相册 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
同类课程
和你正在看的这门一个方向
前端开发1
永久有效 · 网盘发货
前端开发妙码学院《2025大前端架构师训练营》
永久有效 · 网盘发货
前端开发Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战
永久有效 · 网盘发货
前端开发Vibe Coding 实战开发指南 用Claude Code Cursor和Codex极速打造全栈应用
永久有效 · 网盘发货
前端开发不用深厚基础的 Codex 商用 Web 项目开发 + 变现完整教学包
永久有效 · 网盘发货
前端开发AI编程实战课：VUE+Django+MySQL开发大型网站项目，从入门到项目落地，AI助力编程小白逆袭
永久有效 · 网盘发货