用 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






