📚 课程简介
本系列课程是一套完整的企业级前端开发实战教程，涵盖从项目搭建、工程化配置、权限管理、移动端适配、脚手架开发、前端监控、性能优化、CI/CD 部署等全流程内容。
课程不仅教你“怎么做”，更强调“为什么这么做”，帮助你在简历中打造技术亮点，在面试中脱颖而出。
🗂️ 课程目录（按模块划分）
🧰 第一部分：环境与工程化配置（第1–18讲）
|
编号 |
标题 |
|
001 |
课程资料说明 |
|
002 |
代码和文档的说明 |
|
003 |
作者常用的VSCode插件 - 提高工作效率 |
|
004 |
企业里面标准的前端开发流程 |
|
005 |
第1节：为什么会有这个系列的课程 |
|
006 |
第2节：学完之后的收获，简历可以这样写 |
|
007 |
第3节：从0开始项目的基本搭建 |
|
008 |
第4节：从0开始路由、Axios、TypeScript 相关配置 |
|
009 |
第5节：vite.config.ts 配置和启动项目分支说明 |
|
010 |
第6节：Axios 的详细封装与业务模块结合 |
|
011 |
第7节：路由的封装 |
|
012 |
第8节：Pinia 数据管理（Store 模块）的封装 |
|
013 |
第9节：从0开始项目 ESLint 规范的配置 |
|
014 |
第10节：从0开始详细配置 Prettier 代码格式化 |
|
015 |
第11节：项目 CSS 文件格式校验配置 Stylelint |
|
016 |
第12节：配置提交规范 Husky + lint-staged |
|
017 |
第13节：纠正 ESLint 错误，配置项目的 Mock 数据 |
|
018 |
第14节：Element Plus 组件库按需导入和完整配置 |
📌 重点收获：掌握现代前端工程化体系，打造团队级代码规范。
🖥️ 第二部分：核心功能开发（第19–31讲）
|
编号 |
标题 |
|
019 |
第15节：样式的定义和引入 |
|
020 |
第16节：介绍要开发的功能 |
|
021 |
第17节：用户登录模块 |
|
022 |
第18节：页面整体布局功能的实现 |
|
023 |
第19节：实现页面布局 - 登录和登出的功能 |
|
024 |
第20节：菜单和路由的改造 |
|
025 |
第21节：项目模块的开发 |
|
026 |
第22节：项目管理模块的搜索功能 |
|
027 |
第23节：用户模块的开发 |
|
028 |
第24节：用户的编辑功能 |
|
029 |
第25节：用户编辑功能（续） |
|
030 |
第26节：用户角色功能实现 |
|
031 |
第27节：权限管理 |
|
032 |
第28节：权限 Tree 的编辑功能实现 |
📌 重点收获：完成 RBAC 权限系统，掌握动态路由、菜单渲染、状态管理等核心技能。
💡 第三部分：高级技巧与组件封装（第32–44讲）
|
编号 |
标题 |
|
033 |
第29-1节：处理项目依赖问题和 Vue 使用小技巧 |
|
034 |
第29-2节：总结提炼 - 代码演示 - 解决问题的方式和思路 |
|
035 |
第30-1节：项目中 TypeScript 定义类型的抽离 |
|
036 |
第30-2节：TypeScript 在 Vue 项目中的高级用法 |
|
037 |
第30-3节：自定义封装一个业务组件 |
|
038 |
第30-4节：组件自动注册和引入 |
|
039 |
第31-1节：面包屑功能的实现 |
|
040 |
第31-2节：面包屑功能实现 - 菜单的改造 |
|
041 |
第31-3节：面包屑功能实现（1） |
|
042 |
第31-4节：面包屑功能实现（2） |
|
043 |
第31-5节：面包屑功能的总结和思考 |
|
044 |
第32节：项目总结 - 简历亮点 |
📌 重点收获：提升代码复用性与可维护性，掌握 TypeScript 高级类型技巧。
🚀 第四部分：性能优化与打包构建（第45–51讲）
|
编号 |
标题 |
|
045 |
第33节：项目单元测试 - 要了解的内容 |
|
046 |
第34节：项目打包优化 |
|
047 |
第35节：优化打包 - Rollup 和 Webpack 对比 |
|
048 |
第36节：项目优化打包抽离三方包 |
|
049 |
第37节：外链形式的打包模式和业务场景优化 |
|
050 |
第38节：打包优化配置自动化外链和压缩机制（gzip、br） |
|
051 |
第38-1节：Vite 打包优化高阶玩法 |
📌 重点收获：掌握前端性能优化核心手段，显著提升首屏加载速度。
🛠️ 第五部分：脚手架开发（第52–68讲）
|
编号 |
标题 |
|
052 |
第39节：高级前端必备知识点 - 脚手架工具 |
|
053 |
第40节：手把手搭建集成的脚手架配置 |
|
054 |
第41节：脚手架工具 Commander 的开发 |
|
055 |
第42节：解决版本的问题 |
|
056 |
第43节：创建 create 文件和对应的方法 |
|
057 |
第44节：引入 prompt 定义模板文件 |
|
058 |
第45节：引入 simple-git 拉取远端代码模板 |
|
059 |
第46节：解决 chalk 版本引入的问题 |
|
060 |
第47节：完善文件夹覆盖的场景功能 |
|
061 |
第48节：解决拉取代码的小问题 |
|
062 |
第49节：发布到 npm 平台合理配置 package.json 文件 |
|
063 |
第50节：详解 npm 发布命令和开源生态使用技巧 |
|
064 |
第51节：实现检测官方 npm 包版本的功能 |
|
065 |
第52节：发布新的 npm 包版本，验证新功能 |
|
066 |
第53节：给脚手架添加 update 方法 |
|
067 |
第54节：引入 figlet 和 log-symbols 打印欢迎信息 |
|
068 |
第55节：脚手架作为简历中的亮点和难点怎么和面试官交流 |
📌 重点收获：独立开发并发布一个 CLI 工具，成为简历上的“杀手锏”。
📱 第六部分：移动端开发（第69–73讲）
|
编号 |
标题 |
|
069 |
第55节：移动端开发必备知识 - 设计稿比例 |
|
070 |
第56节：彻底搞懂 px、rem、vw 关系 - 屏幕自适应原理 |
|
071 |
第57节：引入 Vant 组件库，改造项目搭建移动端框架 |
|
072 |
第58节：改造移动端项目落地最佳实践，兼容各机型设计稿 |
|
073 |
第59节：移动端模板项目难点，复盘和总结思考（必看） |
📌 重点收获：掌握移动端适配方案，具备跨端开发能力。
📦 第七部分：VSCode 插件与持续集成（第74–76讲）
|
编号 |
标题 |
|
074 |
作者常用的 VSCode 插件 |
|
075 |
CI/CD 持续集成（以 GitHub Actions 为例） |
|
076 |
课程会持续更新 |
📌 重点收获：提升开发效率，掌握自动化部署流程。
📈 第八部分：前端监控与错误追踪（第77–124讲）
|
编号 |
标题 |
|
077 |
1：课程大纲和技术路线图 - 必看 |
|
078 |
2：前端监控全景图概览 - 做完做好不容易 |
|
079 |
3：前端性能指标定位和详细说明（排查实战） |
|
080 |
4：前端资源大小和加载情况统计实战演示 |
|
081 |
5：创建项目 - 测试 web-vitals 统计规则 |
|
082 |
6：添加 export 导出函数 |
|
083 |
7：统计 FP、FCP、LCP 的时间 |
|
084 |
8：前端静态资源的统计 |
|
085 |
9：页面 load 时间统计 |
|
086 |
10：统计 Ajax 请求时间（XHR） |
|
087 |
11：错误异常信息的统计方式（重点内容） |
|
088 |
12：几种错误捕获方式的区别 |
|
089 |
13：错误信息的收集与逻辑处理 |
|
090 |
14：统计 Ajax 请求时长（Fetch 请求处理） |
|
091 |
15：Vue/React 框架错误信息的收集和上报 |
|
092 |
16：数据上报逻辑的实现 |
|
093 |
17：数据上报的逻辑优化 |
|
094 |
18：批量上报处理机制 |
|
095 |
19：用户行为统计 - PV 和路由监听 |
|
096 |
20：用户行为统计 - 点击事件处理 |
|
097 |
21：改造统计指标的入口文件代码逻辑 |
|
098 |
22：改造 SDK 的入口文件 |
|
099 |
23：Rollup 打包配置 SDK |
|
100 |
24：完善打包 SDK 的代码，解决遇到的问题 |
|
101 |
25：详解 Rollup 的配置文件 |
|
102 |
26：创建 Node.js 服务模拟真实后端接口 |
|
103 |
27：处理 SDK 遗留的报错问题 |
|
104 |
28：错误信息收集的代码测试 |
|
105 |
29：页面性能指标的统计上报代码测试 |
|
106 |
30：Vue 技术栈项目如何进行错误收集和上报 |
|
107 |
31：React 技术栈项目如何收集错误信息 |
|
108 |
32：用户行为的代码测试 |
|
109 |
33：作为项目的难点和亮点写到简历里面 |
|
110 |
34：跨域 JS 错误如何处理与捕获 |
|
111 |
35：构建产物 SourceMap 文件详细说明 |
|
112 |
36：线上错误如何精确定位 - 自动部署 GitHub |
|
113 |
37：配置 SourceMap 还原线上错误信息 |
|
114 |
38：引入 source-map-js 和 error-stack-parser |
|
115 |
39：还原 SourceMap 文件中的源代码逻辑 |
|
116 |
40：改造 main.ts 错误收集报错信息 |
|
117 |
41：改造 homeView 页面，显示具体错误信息 |
|
118 |
42：TypeScript 一直飘红如何解决 |
|
119 |
43：改造错误定位页面的逻辑 |
|
120 |
44：实现 SourceMap 源码映射的逻辑 |
|
121 |
45：实现 SourceMap 映射源代码的错误信息逻辑 |
|
122 |
46：实现打包后的 JS 与 SourceMap 文件关联和映射 |
|
123 |
47：具体错误的定位、还原、代码美化逻辑 |
|
124 |
48：SourceMap 错误还原定位项目难点总结 |
📌 重点收获：打造完整的前端监控 SDK，实现错误定位、性能分析、用户行为追踪。
🎥 第九部分：用户行为回放（第125–128讲）
|
编号 |
标题 |
|
125 |
49：rrweb 在前端监控中的作用 |
|
126 |
50：实现 rrweb 录制用户行为的功能 |
|
127 |
51：rrweb 对事件（Events）的处理 |
|
128 |
52：rrweb 实现监控数据的播放功能 |
📌 重点收获：掌握 rrweb 技术，实现“用户操作回放”，用于问题排查与用户体验分析。