使用Vue.js制作爱奇艺视频类App 视频教程下载

前端开发

课程简介

《使用Vue.js制作爱奇艺视频类App 视频教程下载》本课程共 52 节视频，按章节循序渐进讲解，适合希望系统掌握核心知识点的学习者。【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：前端开发工程师、全栈工程师、Web 应用开发。前端岗位仍看重工程化与项目完整度，企业级仿站/专栏类项目可直接写入作品集，有助于从中级向

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

这套《使用Vue.js制作爱奇艺视频类App》总共 52 节，主题很明确：用 Vue 撸一个仿爱奇艺的移动端视频 App。它不是那种把 Vue 语法从头念一遍的课，重心压在"项目长成什么样"上——首页轮播、频道切换、视频详情、播放页、搜索、个人中心这些真实视频 App 的骨架，基本都会在过程中出现。所以判断它值不值得挖，关键不在节数，而在它把哪些环节做透了、哪些只是走个过场。

先看课纲的骨架：这是一个"拼装型"项目课

52 节的体量，放在前端实战课里属于中等偏紧。节数不多的好处是注水空间小，坏处是每个模块只能留 1～3 节的篇幅。从主题能推断出的结构脉络大致是：环境与脚手架先行，然后按页面一个个搭，页面之间靠路由和公共组件串起来，最后收口到打包。这种做法对已经写过一点 Vue 的人很友好——你能清楚看到"一个页面从 0 到 1"的完整动作，而不是听抽象概念。对纯零基础来说，前几节的环境搭建会是第一个坎，需要自己补一点命令行和 npm 的基础。

值得精看的章节：公共组件和播放页

公共组件抽离：视频 App 里，卡片、列表、导航栏、加载态这些东西会反复出现。课纲里这类"抽出可复用组件"的段落，是整套课含金量最高的部分，直接关系到你以后写页面时是复制粘贴还是搭积木。
视频播放页与详情页：这是视频类 App 区别于普通电商/资讯站的命门。播放器如何嵌入、播放列表怎么联动、详情信息怎么布局，这几节的思路最值得反复看。
路由与状态管理：频道切换、返回上一级、页面间传参，会集中在这里。看的时候建议顺手画出路由结构图，比单纯跟着敲有效得多。

相对可以快进的是纯样式还原和基础语法铺垫。爱奇艺的视觉细节很多，但抄 CSS 不是这门课的核心价值，理解布局思路就够。

资料包怎么拆开用：视频和笔记分开对待

配套的章节笔记不要当成"文字版视频"来读。更实用的用法是：先按自己的节奏过一遍视频，卡壳的地方在笔记里定位到对应节点，把那段逻辑用自己的话重写一遍。视频负责"看懂"，笔记负责"记住"，两者混着用反而效率低。另外，52 节拆成三个复习批次比较顺：页面搭建阶段、组件与路由阶段、收尾打包阶段，每批结束逼自己脱离视频独立复现一次。仿站类项目最怕的就是"看会了、写不出"。

学完之后，这个项目能放在什么位置

说实话，仿站项目在前端作品集里不算稀缺，但它的优势在于"完整度"和"业务复杂度"——多页面、有层级、有播放逻辑，比一堆 TodoList 和后台表格有说服力。如果你想让它更抗打，可以在原课基础上加一两处自己的改造：比如把播放页的交互换成自己写的、或者补一层接口数据的缓存处理。面试时能讲清楚"我改了哪里、为什么这么改"，比单纯说"我跟着做完了"要值钱得多。

课程推荐

视频目录（52 节）

使用Vue.js制作爱奇艺视频类App

* 课时1：介绍vue的前世今生.mp4

* 课时2：如何学习vue框架.mp4

* 课时3：todolist的例子.mp4

* 课时4：了解mvvm模式.mp4

* 课时5：组件化的概念.mp4

* 课时6：todolist组件化.mp4

* 课时7：组件间的传值.mp4

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

* 课时9：计算属性.mp4

* 课时10：计算属性中的知识点.mp4

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

* 课时12：vue的实例.mp4

* 课时13：vue的生命周期.mp4

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

* 课时15：vue的列表过渡.mp4

* 课时16：vue中的set方法.mp4

* 课时17：组件的注意事项.mp4

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

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

* 课时20：组件如何绑定事件.mp4

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

* 课时22：vue的插槽.mp4

* 课时23：vue的作用域插槽.mp4

* 课时24：动态组件和特殊指令.mp4

* 课时25：vue当中的css动画原理..mp4

* 课时26：Animate.css.mp4

* 课时27：过渡动画.mp4

* 课时28：Velocity.mp4

* 课时29：多组件的过度效果.mp4

* 课时30：vue中的列表过渡..mp4

* 课时31：vue中的动画封装.mp4

* 课时32：熟悉swiper插件.mp4

* 课时33：熟悉mui插件.mp4

* 课时34：熟悉video.js.mp4

* 课时35：爱奇艺头部部分爱奇艺头部部分（左）.mp4

* 课时36：爱奇艺头部部分（右）.mp4

* 课时37：滑动导航.mp4

* 课时38：爱奇艺搜索框.mp4

* 课时39：爱奇艺轮播图.mp4

* 课时40：爱奇艺列表的展现.mp4

* 课时41：爱奇艺新闻资讯.mp4

* 课时42：爱奇艺导航页.mp4

* 课时43：底部导航的实现.mp4

* 课时44：js插件的使用.mp4

* 课时45：影片介绍部分.mp4

* 课时46：选集的实现.mp4

* 课时47：周边视频.mp4

* 课时48：参演明星.mp4

* 课时49：精彩评论.mp4

* 课时50：打包的准备工作.mp4

* 课时51：通过ip地址访问项目.mp4

* 课时52：安卓app的打包.mp4