用 Vue3 重写短视频前端,到底在练什么

这份资料的主题是用 Vue3 体系去复刻一个短视频 App 的前端界面与交互。它解决的不是“怎么写一个页面”,而是“怎么用组合式 API 组织一整套带数据流、带复杂交互的移动端业务”。具体场景包括:通过接口拉取视频列表、处理用户评论的加载与发送、实现可响应的数据绑定、在组件之间共享状态。如果你之前对 Vue 的认知还停留在写写表单和展示页,这套体系课能逼你面对真实业务里更琐碎的环节:接口字段和组件怎么对应、列表加载的性能怎么不卡、响应式数据到底怎么触发更新。

什么基础能跟上,建议先看哪几块

它不适合完全没碰过前端的人。你需要写过基本的 Vue 组件,懂 props 和事件流转,最好看过 Vue2 的选项式写法,这样在讲 Vue3 与 Vue2 区别、ref 本质、可响应数据原理时,你才能听懂它在解决什么老版本的痛点。建议拿到资料后先看三块:第一是 vite 的原理与配置,因为后续所有工程都跑在这上面,不懂 vite.config 和自定义 plugin,后面改构建会抓瞎;第二是 ref 和响应式数据本质那几节,这是 Vue3 的核心心智模型,理解不透后面写业务会全是玄学;第三是 ts 加 vite 加 vue3 的项目搭建实战,先跟着把本地环境跑通,再往下看业务功能。不要一上来就死磕评论组件或视频加载,顺序反了容易卡在工程问题上。

学完能独立做什么,资料怎么配合练习

跟完这套体系,你应该能独立用 Vue3 加 vite 搭一个移动端短视频前端:从工程初始化、接口联调、视频流和评论的组件拆分,到响应式状态管理,都能自己拿主意。资料使用上有两点建议:一是讲 vite 配置和 plugin 的部分一定要边看边在自己电脑上跑一遍,只读不敲,过两天就忘;二是评论组件、用户视频加载这些功能模块,不要照抄代码,先自己按接口字段写一版,再和资料里的实现对比,这样能暴露你在组件拆分粒度和数据流设计上的盲区。整套资料不是看一遍就会的,把它当脚手架,边做边查,才算没白拿。

智能社Vue3.0进阶实战抖音app 是一份体系课学习资料,内容围绕 Vue 展开。

内容涵盖:实战 api接口 对应功能实现、vue3与vue2的区别、深入ref操作、可响应数据的本质、评论组件、用户视频加载 等主题。

适合对 Vue 有需求、希望一次性拿到完整资料的同学。

下方为完整资料与目录,可先看目录判断是否符合需要。


01 答疑,加客服入群 · 课件.zip

课程目录

*   01 答疑,加客服入群/

  *   01 vite - 1:vite的原理、使用、配置(2021new)/

    *   01 1-认识vitejs、vite的原理

    *   02 2-vite项目的创建与使用

    *   03 3-vite与import

    *   04 4-vite.config基础、自定义plugin

    *   05 5-vite.config详细配置

    *   06 6-总结

    *   07 7-实战:ts+vite+vue3 项目介绍、搭建

  *   02 vite - 2:实战vite开发(2021new)/

    *   01 1-实战:组件拆分

    *   02 2-实战:数据操作

    *   03 3-实战:api接口、对应功能实现 -1

    *   04 4-实战:api接口、对应功能实现 -2

    *   05 5-实战:api接口、对应功能实现 -3

    *   06 6-实战:功能收尾、类型错误与lint

    *   07 7-实战:类型问题(续)、打包、部署、总结

  *   03 从Vue2到Vue3(本课程专属学习群qq:688598232)/

    *   01 1-1-vue3项目搭建

    *   02 1-2-课程项目预览

    *   03 1-3-vue3与vue2的区别-上

    *   04 1-4-vue3与vue2的区别-下

    *   05 1-5-章节总结

  *   04 详解composition API - 上/

    *   01 2-1-composition API究竟是什么

    *   02 2-2-setup、可响应数据—reactive

    *   03 2-3-ref、readonly

    *   04 2-4-递归监听、shallow、trigger

    *   05 2-5-raw原始数据

    *   06 2-6-深入ref操作-上

    *   07 2-7-深入ref操作-下

    *   08 2-8-章节总结

  *   05 详解composition API - 下/

    *   01 3-1-可响应数据的本质 - 上

    *   02 3-2-可响应数据的本质 - 下

    *   03 3-3-setup与函数组件

    *   04 3-4-computed

    *   05 3-5-watch、watchEffect

    *   06 3-6-inject注入

    *   07 3-7-章节总结

  *   06 Vue3生态圈/

    *   01 4-1-router路由(v3版)

    *   02 4-2-vuex数据管理(v3版)

  *   07 实战:抖音短视频 - 1-项目介绍与起始页/

    *   01 5-1-项目介绍、API接口

    *   02 5-2-开屏页

  *   08 实战:抖音短视频 - 2-video页 上/

    *   01 6-1-结构搭建、模块划分

    *   02 6-2-视频播放器

    *   03 6-3-视频数据交互

    *   04 6-4-顶部导航切换

    *   05 6-5-视频信息展现

  *   09 实战:抖音短视频 - 3-video页 下/

    *   01 7-1-评论组件-基础数据

    *   02 7-2-评论组件-分页加载

    *   03 7-3-评论组件-发送评论

    *   04 7-4-点赞、取消

    *   05 7-5-分享

  *   10 实战:抖音短视频 - 4-user页/

    *   01 8-1-基本结构、模块划分、路由跳转

    *   02 8-2-用户信息获取、渲染

    *   03 8-3-用户视频加载 - 上

    *   04 8-4-用户视频加载 - 下

    *   05 8-5-视频页面跳转

  *   11 实战:抖音短视频 - 5-视频切换、项目部署上线/

    *   01 9-1-视频切换 上

    *   02 9-2-视频切换 中

    *   03 9-3-视频切换 下

    *   04 9-4-项目编译与部署

  *   12 补充(一):Ts与vue3正式版/

    *   01 10-1-vue3配置TypeScript

    *   02 10-2-全局数据与公用模块

    *   03 10-3-setup的props、context与生存周期

    *   04 10-4-vuex与vue-router

  *   13 附加:直播公开课回放分享/

    *   01 Vue3+ts组件库开发-1

*   课件.zip