前端技术培训说明
目的
通过对前端基础知识的专门培训，巩固扩展前端知识，让新人前端基础更扎实。
通过对工具的使用技巧介绍，帮助新人提升开发速度和开发效率。
通过对项目入门和踩坑的介绍，帮助新人更快更好地熟悉公司项目。
总之，希望可以通过老带新技术培训的方式，帮助新人在最短的时间内达到能独立负责一个中等及以上难度项目的前端部分的能力。
安排
形式：线下会议+腾讯会议（录屏）
时间：周四17:00-18:00
地点：812会议室
参会人员：最少一个导师 + 所有前端实习生
培训内容：基础知识 + 工具使用技巧 + 项目分享
培训计划
相关培训文档用git统一管理
| 时间 | 导师 | 内容 | 公开链接 |
|---|---|---|---|
| 2021-10-21 | 欧阳丹 | 项目git入门的操作，代码提交、新手快速入门，UI库基本使用，推荐Chrome浏览器、VSCode编辑器（管理后台+小程序） | https://thoughts.aliyun.com/share/616fe172fb3343001a2f6897#title=第一周的前端培训 |
| 2021-10-28 | 黄浚然 | PC端管理后台实战（使用lui组件、前后端交互、封装的网络请求、配置跨域、开发规范ESlint） | https://thoughts.aliyun.com/share/6177f6032e41ad001a766879#title=第二周的前端培训 |
| 2021-11-04 | 赵志星 | BFC、css层叠上下文、层叠等级、层叠顺序、z-index + 移动端布局、rem布局讲解 | https://thoughts.aliyun.com/share/61835afe5cd3b1001af34473#title=第三周的前端培训 |
| 2021-11-11 | 黄晓婷 | 沟通协作（前后端、UI联调、bug修复流程） | |
| 2021-11-18 | 肖韵琳 | 小程序开发实战（框架介绍、封装工具/方法、uni-app简介） | https://thoughts.aliyun.com/share/61949a954b9d26001a0f0984#title=第五周的前端培训 |
| 2021-11-25 | 陈铭 | Vue的组件化、组件通信 | https://thoughts.aliyun.com/share/619f276dbeb34300130f4259#title=第六周的前端培训 |
| 2021-12-02 | 孙杜平 | Chrome调试技巧 + console技巧 | https://thoughts.aliyun.com/share/61a87ab2923f1d001a3f3f54#title=第七周的前端培训 |
| 2021-12-09 | 欧阳丹 | vuex的store用法 | https://thoughts.aliyun.com/share/61b19118fe8acb001a62578a#title=第八周的前端培训 |
| 2021-12-16 | 赵志星 | vscode快捷键 + 推荐插件 + Eslint插件 + 自动保存 | https://thoughts.aliyun.com/share/61b966bf8124f2001a162c0e#title=第九周的前端培训 |
| 2021-12-23 | 黄浚然 | CodeFun等提效工具分享 | |
| 请选择日期 | 黄晓婷 | ||
| 请选择日期 | 肖韵琳 |
培训内容
| 范围 | 分类 | 培训内容 |
|---|---|---|
| 前端基础 | HTML+CSS知识 | HTML5+CSS3新特性、CSS选择器优先级 BFC、css层叠上下文、层叠等级、层叠顺序、z-index 居中技巧、css伪类使用技巧、1px问题 移动端布局、rem布局讲解 |
| JavaScript知识点 | 数据类型、ES6特性 数组方法及实际应用 事件冒泡与捕获 原型链 this、作用域 闭包、柯里化 事件循环 promise、generator、async await 浮点精度：0.1 + 0.2 为什么不等于0.3 | |
| 浏览器 | 输入网址到看到网页发生了什么 前端跨域 浏览器缓存机制 浏览器的重绘和回流 浏览器渲染原理 浏览器调试技巧 | |
| 单元测试 | 前端单元测试 | |
| 前端工程化 | 前端模块化介绍：commonjs和esmodule git、svn npm webpack babel eslint sass、less | |
| Vue框架 | 前端组件化 Vue传参 高级组件 响应式原理 vue-router axios vuex ant-design-vue | |
| 性能优化 | 性能优化指标项、问题定位 优化方案 | |
| 前端安全 | 代码安全 网络攻击与防御 | |
| nodejs后端 | 数据库原理简介 模块查找机制、stream 流、非阻塞异步io eggjs框架及项目实战 | |
| TypeScript | TypeScript基础 TypeScript进阶 | |
| 数据结构和算法 | 线性表、树、图 工作中常见算法学习 | |
| 计算机网络 | 计算机网络核心知识点 | |
| 工具使用技巧 | vscode使用技巧分享 | vscode使用技巧分享 |
| vscode插件分享 | vscode插件分享 | |
| codefun使用分享 | codefun使用分享 | |
| markdown使用分享 | markdown使用分享 | |
| console打印技巧 | console打印技巧 | |
| vue-devtool分享 | vue-devtool分享 | |
| 低代码平台分享 | 低代码平台分享 | |
| 项目分享 | 沟通协作 | |
| PC管理后台实战 | PC管理后台实战 | |
| 小程序项目实战 | 小程序项目实战 | |
| SSR项目实战 | SSR项目实战 | |
| APP项目开发实战 | APP项目开发实战 | |
| Electron开发实战 | Electron开发实战 |
培训要求
培训计划表格的内容列从下面培训内容表格的培训内容列选取一个或多个，并附上当天培训的文档和视频链接。
每周培训分类列中的一个分类内容。所有培训内容都讲过一遍后，文档和视频保留为下一轮的文档和视频。若文档和视频需要更新，则在原来文档上进行更新。
培训内容理论上都应该是偏实战性的分享。表格列出来的培训内容网上大把资料，例如JS知识点里面那些很多都是很理论的，网上也能找到， 新人听了估计就过了, 收获的东西很少，也不知道怎么运用，只有加入我们自己在项目中的理解和实战经验分享，才可以说是有比较大的分享价值。举例：像HTML+CSS 可以直接拿他们某个人做得有问题的地方和其他人分享，或者让他们其他的实习现场说一下解决方案，这样印象深刻一点。vue的运用啊， 就直接拿项目实战来。
当前的培训内容为预设内容，实际的培训内容可能需要根据实习生开发过程中提出的问题和实际的培训情况对培训内容进行调整优化。
每次培训结束，导师需要布置思考题或作业给新人。让大家对培训的知识点，可以课后回顾一下找找资料，加深对培训内容的印象。