课程培训
前端开发培训课程体系(选修)

前端开发培训课程体系(选修)

课程目录

  1. 专题一:前端开发基础与开发环境

  2. 专题二:HTML5网页结构设计

  3. 专题三:CSS3样式设计与页面布局

  4. 专题四:Flex弹性布局与Grid网格布局

  5. 专题五:响应式设计与移动端适配

  6. 专题六:JavaScript核心语法与DOM操作

  7. 专题七:ES6+新特性与现代JavaScript开发

  8. 专题八:Ajax与前后端数据交互

  9. 专题九:前端工程化与构建工具

  10. 专题十:Vue.js核心基础

  11. 专题十一:Vue.js高级应用与组件化开发

  12. 专题十二:React核心基础

  13. 专题十三:React高级应用与Hooks

  14. 专题十四:TypeScript与类型安全

  15. 专题十五:前端性能优化与调试技术

  16. 专题十六:跨端开发与小程序开发

  17. 专题十七:前端框架项目实战

  18. 专题十八:大厂面试专题与职业发展

 

专题一:前端开发基础与开发环境

  • 培训对象:零基础入门学员、转行学习前端开发的初学者、需要建立前端知识框架的新人。

  • 培训目标

    1. 了解前端开发的行业背景、技术栈与职业发展路径,建立对前端开发领域的整体认知。

    2. 掌握开发环境的搭建(浏览器、编辑器、版本控制工具),熟悉前端开发的工作流程。

    3. 完成第一个HTML页面,体验从编写代码到浏览器渲染的完整过程。

  • 培训内容介绍

    1. 前端开发概述:了解前端开发的发展历程(从静态页面到动态应用),认识前端在Web开发中的核心地位,了解前端工程师的职业发展路径。

    2. 前端技术栈:认识前端开发的核心技术(HTML、CSS、JavaScript)与扩展技术(框架、工具链、跨端开发),了解前端技术生态的构成。

    3. 浏览器选择:了解主流浏览器的特点(Chrome、Firefox、Edge、Safari),掌握浏览器的开发者工具(DevTools)的基本使用。

    4. 代码编辑器:学习安装和配置VS Code,掌握常用插件(Live Server、Prettier、ESLint)的安装与使用,提高开发效率。

    5. 版本控制基础:了解Git的基本概念(仓库、提交、分支),学习Git的安装与基本命令(clone、add、commit、push、pull)。

    6. GitHub/Gitee使用:学习注册和配置GitHub/Gitee账号,掌握创建仓库、推送代码、克隆项目的方法。

    7. HTML基础:了解HTML的基本概念(超文本标记语言),学习HTML文档的基本结构(DOCTYPE、html、head、body)。

    8. 第一个HTML页面:编写简单的HTML页面(标题、段落、列表、链接、图片),在浏览器中查看渲染效果。

    9. CSS基础:了解CSS的基本概念(层叠样式表),学习CSS的三种引入方式(行内样式、内联样式、外部样式表)。

    10. JavaScript基础:了解JavaScript的基本作用(交互、动态效果),学习在HTML中引入JavaScript的方法(内联脚本、外部脚本)。

    11. 开发工作流:掌握使用Live Server实现代码修改后的自动刷新,体验高效的开发工作流。

    12. 学习资源导航:介绍前端开发的学习资源(MDN、W3C、GitHub、技术社区),规划个人学习路径。

 

专题二:HTML5网页结构设计

  • 培训对象:所有前端初学者、需要系统掌握HTML标签与语义化结构的开发人员。

  • 培训目标

    1. 掌握HTML5的核心标签与语义化标签的使用方法,能够构建结构清晰的网页骨架。

    2. 理解块级元素与行内元素的区别,掌握嵌套规则与文档结构规范。

    3. 掌握表单、多媒体、Canvas等高级标签的使用,实现交互功能与多媒体展示。

  • 培训内容介绍

    1. HTML5概述:了解HTML5的发展历史与设计目标,认识HTML5相比之前版本的新特性(语义化标签、多媒体支持、Canvas绘图)。

    2. 文档结构:学习HTML5的文档结构声明(DOCTYPE)、字符集设置(meta charset)、视口设置(viewport)等关键元信息。

    3. 语义化标签:掌握语义化标签的使用(header、nav、main、article、section、aside、footer),理解语义化对SEO和可访问性的重要性。

    4. 标题与段落:学习标题标签(h1-h6)的层级结构,掌握段落标签(p)、换行标签(br)、水平线标签(hr)的使用。

    5. 文本格式化:掌握文本格式化标签(strong、em、ins、del、sup、sub、code),理解语义与样式的分离。

    6. 列表标签:学习无序列表(ul)、有序列表(ol)、自定义列表(dl)的创建,掌握列表的嵌套使用。

    7. 链接与锚点:掌握超链接标签(a)的使用,学习设置内部链接、外部链接、锚点链接、下载链接,理解target属性的作用。

    8. 图像与多媒体:学习图像标签(img)的属性设置(src、alt、width、height),掌握音频(audio)和视频(video)标签的配置与兼容性处理。

    9. 表格标签:掌握表格的创建(table、tr、td、th),学习合并单元格(colspan、rowspan)、表格头(thead)、表格体(tbody)、表格尾(tfoot)的使用。

    10. 表单标签:学习表单标签(form)的属性设置(action、method、enctype),掌握输入元素(input)的各种类型(text、password、radio、checkbox、email、number、file)。

    11. 表单高级元素:掌握下拉列表(select、option)、文本域(textarea)、按钮(button)的使用,学习表单验证属性(required、pattern、minlength)。

    12. HTML5高级标签:了解Canvas绘图基础、SVG矢量图形、进度条(progress)、度量(meter)等新标签的应用场景。

    13. 实体字符:学习常用HTML实体字符(<、>、&、 、©)的表示方法。

 

专题三:CSS3样式设计与页面布局

  • 培训对象:需要掌握CSS样式设计与页面美化能力的网页设计师、前端开发人员。

  • 培训目标

    1. 掌握CSS选择器、盒模型、定位机制等核心概念,能够实现页面元素的精准控制。

    2. 学习CSS3的新特性(圆角、阴影、渐变、过渡、动画),实现丰富的视觉效果。

    3. 掌握CSS代码的组织与管理方法,编写可维护的样式代码。

  • 培训内容介绍

    1. CSS基础:回顾CSS的语法结构(选择器、属性、值),掌握CSS的引入方式与优先级规则。

    2. 选择器:掌握各类选择器(元素选择器、类选择器、ID选择器、通配符选择器、属性选择器、伪类选择器、伪元素选择器)的使用方法。

    3. 选择器优先级:理解选择器优先级的计算规则(!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符),掌握权重的计算方法。

    4. 盒模型:深入理解盒模型的组成(内容content、内边距padding、边框border、外边距margin),掌握盒模型的计算方式(标准盒模型与怪异盒模型)。

    5. 背景属性:学习背景相关的属性(background-color、background-image、background-repeat、background-position、background-size),实现背景图片的控制。

    6. 字体与文本:掌握字体属性(font-family、font-size、font-weight、font-style、font-variant),学习文本属性(color、text-align、text-decoration、text-transform、line-height)。

    7. 列表与表格样式:学习列表样式(list-style-type、list-style-position、list-style-image),掌握表格样式(border-collapse、border-spacing、caption-side)。

    8. 定位机制:掌握相对定位(relative)、绝对定位(absolute)、固定定位(fixed)、粘性定位(sticky)的使用场景与特点,理解定位元素的层叠顺序(z-index)。

    9. 浮动与清除:学习浮动(float)的原理与应用,掌握清除浮动(clear)的方法,了解清除浮动的多种技巧(额外标签法、伪元素法、overflow法)。

    10. 显示与可见性:掌握display属性(block、inline、inline-block、none)的用法,了解visibility属性与display的区别。

    11. CSS3边框与背景:学习边框圆角(border-radius)、边框阴影(box-shadow),掌握多重背景(multiple backgrounds)的设置。

    12. CSS3渐变:学习线性渐变(linear-gradient)、径向渐变(radial-gradient)的创建与参数设置。

    13. CSS3过渡:掌握过渡(transition)属性的使用(property、duration、timing-function、delay),实现平滑的样式变化。

    14. CSS3动画:学习关键帧动画(@keyframes)的定义,掌握动画属性(animation-name、animation-duration、animation-timing-function、animation-iteration-count、animation-direction)的使用。

 

专题四:Flex弹性布局与Grid网格布局

  • 培训对象:需要掌握现代CSS布局技术、实现复杂页面结构的前端开发人员。

  • 培训目标

    1. 掌握Flex弹性布局的原理与属性,能够实现一维布局(水平居中、垂直居中、等分布局)。

    2. 掌握Grid网格布局的原理与属性,能够实现二维布局(复杂网格系统)。

    3. 理解不同布局技术的适用场景,能够根据需求选择合适的布局方案。

  • 培训内容介绍

    1. 布局技术概述:回顾传统布局方式(表格布局、浮动布局、定位布局)的局限性,了解现代布局技术(Flex、Grid)的优势。

    2. Flex容器属性:掌握flex容器的属性(display:flex、flex-direction、flex-wrap、justify-content、align-items、align-content),理解主轴与交叉轴的概念。

    3. Flex项目属性:学习flex项目的属性(order、flex-grow、flex-shrink、flex-basis、align-self),掌握flex属性的简写形式。

    4. 水平垂直居中:使用Flex实现元素的水平垂直居中,掌握单行文本、块级元素的居中技巧。

    5. 等分布局:使用Flex实现等宽列布局,掌握flex:1的使用场景。

    6. 圣杯布局:使用Flex实现经典的圣杯布局(固定宽度两侧 + 自适应中间),理解flex属性的灵活应用。

    7. Grid容器属性:掌握grid容器的属性(display:grid、grid-template-columns、grid-template-rows、gap、justify-items、align-items、justify-content、align-content)。

    8. Grid项目属性:学习grid项目的属性(grid-column、grid-row、grid-area),掌握跨越多个网格单元格的布局方法。

    9. 命名网格线:学习为网格线命名,使用命名网格线简化布局定义。

    10. 命名网格区域:掌握grid-template-areas定义网格区域,使用grid-area将项目放置到命名区域,实现直观的布局描述。

    11. 隐式网格:理解隐式网格的概念,掌握grid-auto-rows、grid-auto-columns、grid-auto-flow对隐式网格的控制。

    12. Grid布局案例:实现典型的网格布局案例(图片墙、卡片列表、仪表盘),掌握Grid在实际项目中的应用。

    13. Flex与Grid对比:对比Flex和Grid的适用场景(一维布局用Flex、二维布局用Grid),学习在同一个项目中灵活组合使用两种布局。

 

专题五:响应式设计与移动端适配

  • 培训对象:需要开发适配多端(PC、平板、手机)网页的前端开发人员。

  • 培训目标

    1. 理解响应式设计的原则与策略,掌握媒体查询的使用方法,实现不同屏幕尺寸的适配。

    2. 掌握视口(viewport)的概念与配置,了解移动端常见的适配单位(rem、vw/vh、百分比)。

    3. 学习移动端常见问题的处理方法(1px边框、点击延迟、300ms延迟),实现流畅的移动端体验。

  • 培训内容介绍

    1. 响应式设计概述:了解响应式设计的发展背景(移动互联网的兴起),认识响应式设计的核心原则(流式布局、弹性图片、媒体查询)。

    2. 视口(viewport):理解视口的概念(布局视口、视觉视口、理想视口),掌握viewport元标签的配置(width、initial-scale、maximum-scale、user-scalable)。

    3. 媒体查询:学习媒体查询的语法(@media),掌握媒体类型(screen、print)和媒体特征(width、height、orientation、aspect-ratio)的使用。

    4. 断点设置:学习根据常见的设备尺寸设置断点(移动端、平板、桌面),掌握移动优先(mobile-first)和桌面优先(desktop-first)的设计策略。

    5. 流式布局:使用百分比布局实现流式布局,掌握max-width、min-width对布局的限制作用。

    6. 弹性图片:学习使图片自适应不同屏幕尺寸的方法(max-width:100%),了解响应式图片(srcset、sizes、picture)的使用。

    7. 响应式单位:掌握rem单位(相对于根元素字体大小)的使用方法,学习通过JavaScript动态设置根元素字体大小实现适配。

    8. 视口单位:学习vw/vh单位(相对于视口宽度/高度)的使用,了解其在字体大小、间距、布局中的应用。

    9. 移动端1px边框:了解移动端高清屏幕下1px边框显示问题的原因,学习使用伪元素+transform缩放实现真实1px边框。

    10. 点击延迟与300ms延迟:了解移动端点击延迟问题的原因,学习使用touch事件或fastclick库解决300ms延迟。

    11. 响应式导航:实现不同屏幕下的导航切换(移动端汉堡菜单、桌面端水平菜单),学习使用JavaScript控制菜单显示隐藏。

    12. 响应式表格:处理表格在移动端的显示问题,学习使用overflow滚动或将表格转换为卡片式布局。

    13. 媒体查询案例:完成一个完整的响应式页面布局,包含头部、内容区、侧边栏、底部,在不同屏幕尺寸下呈现不同的布局形态。

 

专题六:JavaScript核心语法与DOM操作

  • 培训对象:JavaScript初学者、需要系统掌握JS核心语法与DOM编程的开发人员。

  • 培训目标

    1. 掌握JavaScript的基本语法(变量、数据类型、运算符、流程控制、函数),能够编写简单的交互程序。

    2. 理解DOM(文档对象模型)的结构,掌握DOM元素的获取、创建、修改、删除操作。

    3. 掌握事件处理的基本方法,能够为页面元素添加交互行为。

  • 培训内容介绍

    1. JavaScript概述:了解JavaScript的发展历史(ECMAScript标准)与核心作用(动态交互、表单验证、异步通信),认识JavaScript的运行环境(浏览器、Node.js)。

    2. 变量与数据类型:掌握变量的声明(var、let、const)与作用域,学习基本数据类型(String、Number、Boolean、Null、Undefined、Symbol)的特点。

    3. 运算符:掌握算术运算符、赋值运算符、比较运算符、逻辑运算符、三元运算符的使用。

    4. 类型转换:学习显式类型转换(String()、Number()、Boolean())和隐式类型转换的规则。

    5. 流程控制:掌握条件语句(if-else、switch-case)、循环语句(for、while、do-while)的使用。

    6. 函数:学习函数的定义方式(函数声明、函数表达式、箭头函数),理解参数传递、返回值、作用域链的概念。

    7. 数组:掌握数组的创建、访问、修改,学习数组常用方法(push、pop、shift、unshift、concat、slice、splice、join、indexOf、includes)。

    8. 对象:学习对象的创建(对象字面量、构造函数、Object.create),掌握对象属性的访问与修改,理解原型链的基本概念。

    9. DOM概述:理解DOM树的结构,了解document对象的常见属性和方法。

    10. 元素获取:掌握通过id、class、标签名、选择器获取元素的方法(getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll)。

    11. 元素内容操作:学习获取和设置元素内容(innerHTML、innerText、textContent),了解三者的区别。

    12. 元素属性操作:掌握元素属性的获取、设置、删除(getAttribute、setAttribute、removeAttribute),学习操作class属性(className、classList)。

    13. 元素样式操作:学习通过style属性修改内联样式,掌握classList添加/移除/切换类名实现样式控制。

    14. 元素创建与删除:学习创建新元素(createElement)、添加子元素(appendChild、insertBefore)、删除元素(removeChild)的方法。

    15. 事件基础:了解事件的概念(用户操作触发的行为),掌握事件绑定的方法(onclick、addEventListener)。

    16. 常见事件类型:学习鼠标事件(click、dblclick、mouseenter、mouseleave)、键盘事件(keydown、keyup)、表单事件(submit、change、input)。

    17. 事件对象:理解事件对象的属性(target、type、clientX、clientY、keyCode),学习阻止默认事件(preventDefault)和阻止事件冒泡(stopPropagation)。

 

专题七:ES6+新特性与现代JavaScript开发

  • 培训对象:有一定JavaScript基础的开发人员、需要掌握现代JavaScript编程技术的开发者。

  • 培训目标

    1. 掌握ES6+的核心新特性(let/const、箭头函数、解构赋值、模板字符串、类、模块化),编写现代化的JavaScript代码。

    2. 理解Promise、async/await等异步编程技术,掌握处理异步操作的方法。

    3. 学习常用数据结构(Set、Map)和新增方法(数组方法、字符串方法),提高代码效率。

  • 培训内容介绍

    1. let与const:理解let和const的块级作用域,掌握与var的区别(暂时性死区、不允许重复声明)。

    2. 解构赋值:学习数组解构、对象解构的语法,掌握在函数参数、变量交换、深度解构中的应用。

    3. 展开运算符:掌握展开运算符(...)的使用(数组展开、对象展开、函数参数展开),了解其与rest参数的区别。

    4. 模板字符串:学习模板字符串的语法(${}),掌握多行字符串、表达式嵌入、标签模板的使用。

    5. 箭头函数:理解箭头函数的语法特点,掌握箭头函数与普通函数的区别(this绑定、没有arguments、不能作为构造函数)。

    6. 增强的对象字面量:学习属性简写、方法简写、计算属性名的使用。

    7. 可选链与空值合并:掌握可选链操作符(?.)和空值合并操作符(??)的使用,简化深层属性访问和默认值设置。

    8. Symbol类型:了解Symbol作为唯一值的特点,学习Symbol.for和Symbol.keyFor的使用。

    9. Set与Map:掌握Set(不重复集合)和Map(键值对集合)的创建与常用方法,理解其与普通对象/数组的区别。

    10. 数组新增方法:学习数组的迭代方法(forEach、map、filter、reduce、some、every、find、findIndex),掌握函数式编程风格。

    11. 字符串新增方法:学习字符串的新方法(includes、startsWith、endsWith、repeat、padStart、padEnd)。

    12. Promise基础:理解Promise的概念与状态(pending、fulfilled、rejected),掌握Promise的创建与使用(then、catch、finally)。

    13. Promise高级:学习Promise的静态方法(Promise.all、Promise.race、Promise.allSettled、Promise.resolve、Promise.reject)。

    14. async/await:掌握async/await的语法,理解其作为Promise的语法糖,学习try-catch处理异步错误。

    15. 模块化:掌握ES6模块化的导入导出语法(export、import、export default),理解模块的静态分析机制。

    16. Class语法:学习类的定义(constructor、属性、方法),掌握继承(extends)和super的使用。

    17. 装饰器:了解装饰器的概念与应用场景,学习类装饰器、方法装饰器的基本使用。

 

专题八:Ajax与前后端数据交互

  • 培训对象:需要与后端接口交互、实现动态数据加载的前端开发人员。

  • 培训目标

    1. 理解HTTP协议的基本原理(请求方法、状态码、头部信息),掌握Ajax的核心概念(异步、不刷新页面)。

    2. 掌握原生XMLHttpRequest的使用,能够发送异步请求处理响应数据。

    3. 掌握Fetch API的使用,能够基于Promise实现现代化的网络请求。

  • 培训内容介绍

    1. HTTP协议基础:学习HTTP请求方法(GET、POST、PUT、DELETE、PATCH)的用途,理解HTTP状态码(2xx成功、3xx重定向、4xx客户端错误、5xx服务器错误)的含义。

    2. HTTP头部:了解常见请求头(Content-Type、Accept、Authorization)和响应头(Content-Type、Cache-Control、Set-Cookie)的作用。

    3. Ajax概述:了解Ajax(Asynchronous JavaScript and XML)的概念与工作原理,认识其在提升用户体验中的作用。

    4. XMLHttpRequest:学习创建XHR对象,掌握open、send方法的使用,监听readystatechange事件处理响应。

    5. XHR高级用法:学习设置请求头(setRequestHeader)、处理超时(timeout)、中止请求(abort)。

    6. XHR与FormData:掌握FormData对象的使用,实现文件上传和表单数据提交。

    7. Fetch API:学习Fetch的基本使用(fetch(url, options)),理解其基于Promise的设计。

    8. Fetch参数设置:掌握method、headers、body、mode、credentials等参数的配置。

    9. 响应处理:学习从Response对象获取数据的方法(json()、text()、blob()),理解响应对象的属性和方法。

    10. 跨域问题:了解同源策略的概念,掌握跨域资源共享(CORS)的原理与配置,学习JSONP的原理与使用(作为一种历史方案)。

    11. Axios库:学习Axios的基本使用,掌握其相比原生Fetch的优势(请求拦截、响应拦截、取消请求)。

    12. API封装:学习如何封装统一的HTTP请求模块,处理请求/响应拦截、错误统一处理、Token管理。

    13. RESTful API:了解RESTful API的设计规范,学习与RESTful接口的数据交互模式。

    14. GraphQL基础:了解GraphQL的概念与特点,学习基本的查询语法和与GraphQL接口的交互。

 

专题九:前端工程化与构建工具

  • 培训对象:需要掌握现代前端开发流程、构建工具的中高级前端开发人员。

  • 培训目标

    1. 理解前端工程化的概念与价值,掌握包管理工具(npm/yarn/pnpm)的使用。

    2. 掌握Vite构建工具的基本配置与使用,能够搭建现代化的前端开发环境。

    3. 学习代码规范工具(ESLint、Prettier)的配置,保证代码质量和风格一致性。

  • 培训内容介绍

    1. 前端工程化概述:了解前端工程化产生的背景(项目复杂度提升、多人协作需求),认识工程化的核心要素(模块化、组件化、自动化、规范化)。

    2. Node.js基础:学习Node.js的安装与基本使用,理解其在前端开发中的作用(开发服务器、构建工具、包管理)。

    3. npm包管理:掌握npm的常用命令(init、install、uninstall、update、run),理解package.json文件的结构(dependencies、devDependencies、scripts)。

    4. 语义化版本:学习语义化版本规范(主版本.次版本.修订版本),理解版本范围的表示(^、~、*)。

    5. yarn与pnpm:了解yarn和pnpm的特点,对比与npm的差异,掌握基本的迁移方法。

    6. Vite概述:了解Vite的设计理念(基于ES模块的开发服务器、极速的热更新),对比Webpack等传统构建工具的优势。

    7. Vite项目创建:学习使用create-vite脚手架创建项目,理解项目目录结构(public、src、index.html)。

    8. Vite配置文件:掌握vite.config.js的配置(plugins、server、resolve、css),学习配置别名(alias)简化导入路径。

    9. 环境变量:学习在Vite中配置环境变量(.env文件),掌握不同环境下变量值的读取。

    10. ESLint:学习ESLint的安装与配置(.eslintrc),掌握常用规则(规则级别、继承、插件),实现代码质量检查。

    11. Prettier:学习Prettier的安装与配置(.prettierrc),掌握代码格式化的规则设置,实现代码风格统一。

    12. Husky与lint-staged:学习使用Husky配置Git钩子(pre-commit、pre-push),结合lint-staged实现提交前的代码检查和格式化。

    13. 构建与部署:学习运行build命令生成生产环境代码,理解dist目录的结构,掌握部署到静态服务器(GitHub Pages、Netlify、Vercel)的方法。

 

专题十:Vue.js核心基础

  • 培训对象:需要掌握Vue.js框架使用的前端开发人员、从零开始学习Vue的初学者。

  • 培训目标

    1. 理解Vue.js的核心设计理念(渐进式框架、声明式渲染、响应式系统),掌握Vue实例的创建与生命周期。

    2. 掌握Vue的模板语法、指令、计算属性、监听器,能够实现数据驱动的界面更新。

    3. 掌握组件化开发的基本方法(组件注册、组件通信),能够构建简单的Vue应用。

  • 培训内容介绍

    1. Vue.js概述:了解Vue.js的发展历程(尤雨溪)与设计理念(渐进式框架),认识Vue在企业级开发中的应用,对比Vue与其他框架(React、Angular)的特点。

    2. Vue实例:学习创建Vue应用实例,理解Vue实例的选项对象(data、methods、computed、watch、生命周期钩子)。

    3. 模板语法:掌握插值表达式({{}})的使用,学习v-html渲染HTML,了解v-text和v-once的用途。

    4. 指令:掌握条件渲染指令(v-if、v-else-if、v-else、v-show)的区别与适用场景,学习列表渲染指令(v-for)的使用(数组、对象、范围)。

    5. v-bind:掌握v-bind绑定属性(class、style、自定义属性),学习动态绑定和对象语法。

    6. v-on:学习v-on绑定事件,掌握事件修饰符(stop、prevent、capture、self、once)和按键修饰符(enter、tab、delete、esc)。

    7. v-model:理解v-model双向绑定的原理,掌握在表单元素(input、textarea、select)上的使用,学习修饰符(lazy、number、trim)的作用。

    8. 计算属性:理解计算属性(computed)与方法的区别(缓存、依赖追踪),掌握计算属性的getter和setter。

    9. 监听器:学习使用watch监听数据变化,掌握深度监听(deep)和立即执行(immediate)的配置。

    10. 生命周期:掌握Vue实例的生命周期钩子(beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed),理解各阶段适合执行的操作。

    11. 组件基础:学习组件的定义(全局注册、局部注册),理解组件实例与根实例的关系。

    12. 组件通信:掌握父子组件通信(props向下传值、$emit向上传事件),学习组件上使用v-model的原理。

    13. 插槽(slot):学习插槽的基本使用,掌握具名插槽、作用域插槽的用法,实现组件的灵活扩展。

    14. 单文件组件(SFC):理解单文件组件的结构(template、script、style),学习使用Vite搭建Vue单文件组件项目。

 

专题十一:Vue.js高级应用与组件化开发

  • 培训对象:有一定Vue基础、需要掌握Vue高级特性的开发人员。

  • 培训目标

    1. 掌握Vue Router的使用,实现单页应用(SPA)的路由管理。

    2. 掌握Vuex/Pinia的状态管理,实现跨组件的数据共享。

    3. 学习组合式API(Composition API),能够编写更灵活、可复用的逻辑代码。

  • 培训内容介绍

    1. 单页应用(SPA):理解SPA的概念与优势,认识路由在前端SPA中的核心作用。

    2. Vue Router基础:学习安装和配置Vue Router,掌握路由表定义、router-view、router-link的使用。

    3. 路由模式:理解history模式和hash模式的区别,掌握配置方法和服务端配置要求。

    4. 路由参数:学习动态路由匹配(:id),掌握通过params和query获取参数的方法。

    5. 嵌套路由:掌握嵌套路由的配置,实现多级页面布局。

    6. 路由守卫:学习全局守卫(beforeEach、beforeResolve)、路由独享守卫、组件内守卫,实现登录权限控制。

    7. 路由元信息:掌握为路由添加元信息(meta),在守卫中根据元信息进行权限判断。

    8. 路由懒加载:学习使用动态导入实现路由懒加载,优化首屏加载性能。

    9. 状态管理概述:理解Vuex的设计理念(单一状态树),认识状态管理在复杂应用中的必要性。

    10. Vuex核心概念:掌握State、Getter、Mutation、Action、Module的概念与使用。

    11. Vuex辅助函数:学习mapState、mapGetters、mapMutations、mapActions的使用,简化组件中的状态访问。

    12. Pinia简介:了解Pinia作为Vuex的替代方案,掌握Pinia的基本使用(Store定义、State、Getter、Action)。

    13. 组合式API:理解选项式API与组合式API的区别,学习setup函数的使用。

    14. 响应式核心:掌握ref、reactive的使用,理解toRefs、toRef的作用。

    15. 组合式函数:学习编写自定义组合式函数(useXxx),实现逻辑的复用。

    16. Teleport:掌握Teleport组件的使用,实现子节点渲染到DOM中其他位置。

    17. Suspense:了解Suspense组件的使用,处理异步组件的加载状态。

    18. Provide/Inject:学习provide/inject实现跨层级组件通信,避免props层层传递。

 

专题十二:React核心基础

  • 培训对象:需要掌握React框架使用的前端开发人员、从零开始学习React的初学者。

  • 培训目标

    1. 理解React的核心设计理念(声明式、组件化、单向数据流),掌握JSX语法与虚拟DOM机制。

    2. 掌握React组件的两种定义方式(函数组件、类组件),理解组件生命周期与状态管理。

    3. 掌握事件处理、条件渲染、列表渲染等基础功能,能够构建简单的React应用。

  • 培训内容介绍

    1. React概述:了解React的发展历史(Facebook)与设计理念(声明式、组件化、一次学习随处编写),认识React在企业级开发中的应用,对比React与其他框架(Vue、Angular)的特点。

    2. JSX语法:理解JSX作为JavaScript语法扩展的本质,掌握在JSX中嵌入表达式({})、指定属性、嵌套子元素的方法。

    3. 虚拟DOM:理解虚拟DOM的概念与工作原理,认识其提升性能的方式(Diff算法、批量更新)。

    4. React元素与组件:区分React元素与组件的概念,学习创建组件的两种方式(函数组件、类组件)。

    5. Props:掌握props的使用(父组件向子组件传递数据),理解props的只读特性,学习propTypes进行类型检查。

    6. State:学习在类组件中定义和更新状态(state、setState),理解setState的异步特性。

    7. useState:学习在函数组件中使用useState钩子管理状态,掌握状态更新的方法。

    8. 事件处理:掌握React中的事件绑定方式(onClick、onChange),理解事件对象的合成事件机制。

    9. 条件渲染:学习使用if语句、三元表达式、逻辑与(&&)运算符实现条件渲染。

    10. 列表渲染:掌握使用map方法渲染列表,理解key属性的作用与选择原则。

    11. 表单处理:学习受控组件和非受控组件的区别,掌握受控组件的实现方法(value + onChange)。

    12. 组件生命周期:学习类组件的生命周期钩子(componentDidMount、componentDidUpdate、componentWillUnmount),理解各阶段适合执行的操作。

    13. useEffect:学习useEffect钩子的使用,掌握不同依赖项(空数组、具体值、无依赖)对应的执行时机,理解清理函数的作用。

    14. Refs:学习创建和使用refs(createRef、useRef),掌握refs在访问DOM元素和存储可变值中的应用。

    15. 组件通信:掌握父子组件通信(props传递函数)、跨层级通信(Context)的基本用法。

 

专题十三:React高级应用与Hooks

  • 培训对象:有一定React基础、需要掌握React高级特性和Hooks API的开发人员。

  • 培训目标

    1. 掌握React Router的使用,实现单页应用的路由管理。

    2. 掌握Redux/Toolkit的状态管理,实现可预测的状态容器。

    3. 掌握常用Hooks(useContext、useReducer、useMemo、useCallback)的使用,编写高效的函数组件。

  • 培训内容介绍

    1. React Router基础:学习安装和配置React Router,掌握Router、Routes、Route、Link、NavLink的使用。

    2. 路由参数:学习通过useParams获取动态路由参数,通过useLocation获取查询参数,通过useNavigate进行编程式导航。

    3. 嵌套路由:掌握嵌套路由的配置,使用Outlet组件渲染子路由。

    4. 路由守卫:学习实现路由权限控制(创建ProtectedRoute组件),结合useNavigate实现重定向。

    5. Context API:深入学习Context的创建与使用(createContext、Provider、useContext),实现跨层级数据共享。

    6. useReducer:理解useReducer的原理(类似Redux的reducer模式),掌握在复杂状态管理中的应用。

    7. useCallback与性能优化:理解useCallback的作用(缓存函数引用),掌握避免子组件不必要渲染的方法。

    8. useMemo:学习useMemo缓存计算结果,理解其与useEffect的区别,掌握性能优化场景。

    9. 自定义Hooks:学习编写自定义Hook(useXxx)的逻辑复用方式,掌握抽象通用逻辑的方法。

    10. Redux概述:理解Redux的设计理念(单一数据源、状态只读、纯函数修改),认识Redux的工作流程。

    11. Redux核心概念:掌握Action、Reducer、Store的概念与使用,学习创建和组合reducers。

    12. React-Redux:学习安装和配置react-redux,掌握Provider、useSelector、useDispatch的使用。

    13. Redux Toolkit:了解Redux Toolkit作为官方推荐写法的优势,掌握configureStore、createSlice的使用。

    14. 异步操作:学习处理Redux中的异步操作(createAsyncThunk),掌握异步action的创建与状态管理。

    15. 高阶组件(HOC):了解高阶组件的概念与作用,学习编写HOC实现逻辑复用。

    16. Render Props:了解Render Props模式,学习通过props传递渲染逻辑。

    17. 代码分割:学习使用React.lazy和Suspense实现组件级别的代码分割,优化首屏加载性能。

    18. 错误边界:了解错误边界的概念,学习创建和使用错误边界组件捕获子组件错误。

 

专题十四:TypeScript与类型安全

  • 培训对象:需要在前端项目中引入类型系统的开发人员、希望提升代码质量和可维护性的开发者。

  • 培训目标

    1. 理解TypeScript的核心优势(静态类型检查、IDE支持、代码自文档化),掌握TS的安装与配置。

    2. 掌握TypeScript的基础类型系统(原始类型、数组、元组、枚举、any、unknown、void、never)。

    3. 掌握接口(interface)、类型别名(type)、类、泛型等高级特性,能够在Vue/React项目中应用TypeScript。

  • 培训内容介绍

    1. TypeScript概述:了解TypeScript作为JavaScript超集的概念,认识静态类型检查的价值,对比与JavaScript的差异。

    2. 环境搭建:学习安装TypeScript编译器(tsc),配置tsconfig.json(target、module、strict、outDir等选项)。

    3. 基础类型:掌握boolean、number、string、array、tuple、enum、any、unknown、void、never的类型定义与使用。

    4. 类型断言:学习类型断言的两种语法(as、<>),了解与非空断言(!)的使用场景。

    5. 接口(interface):学习定义接口描述对象形状,掌握可选属性(?)、只读属性(readonly)、索引签名、函数类型描述。

    6. 接口继承:掌握接口之间的继承(extends),实现接口的复用和扩展。

    7. 类型别名(type):学习使用type定义类型别名,对比与interface的区别(联合类型、元组、基本类型别名)。

    8. 联合类型与交叉类型:掌握联合类型(|)的使用(类型取值可以是多种中的一种),学习交叉类型(&)合并多个类型。

    9. 类型守卫:学习使用typeof、instanceof、in操作符、自定义类型谓词进行类型收窄。

    10. 类(class):掌握TypeScript中类的定义(属性类型、修饰符public/private/protected、readonly、static)。

    11. 抽象类:了解抽象类的概念,学习定义和使用抽象类与抽象方法。

    12. 泛型:理解泛型的概念与作用,掌握泛型函数、泛型接口、泛型类的定义,学习泛型约束(extends)。

    13. 声明文件:了解声明文件(.d.ts)的作用,学习为第三方库编写简单声明,掌握@types包的使用。

    14. TypeScript与Vue:学习在Vue 3 + TypeScript项目中的类型定义(defineComponent、Props类型、Ref类型、Computed类型)。

    15. TypeScript与React:学习在React + TypeScript项目中的类型定义(FC类型、Props类型、事件类型、useState类型、useRef类型)。

    16. 工具类型:了解TypeScript内置工具类型(Partial、Required、Readonly、Pick、Omit、Exclude、Extract、ReturnType、Parameters)。

    17. 条件类型:了解条件类型(extends ? :)的基本语法,掌握infer关键字的使用(类型推断)。

    18. 模板字面量类型:学习模板字面量类型的语法,掌握其与联合类型的组合使用。

 

专题十五:前端性能优化与调试技术

  • 培训对象:需要提升网站性能、优化用户体验的中高级前端开发人员。

  • 培训目标

    1. 理解前端性能优化的核心指标(加载性能、运行时性能),掌握性能评估工具的使用。

    2. 掌握网络层优化技术(资源压缩、缓存策略、CDN加速、懒加载)。

    3. 掌握渲染层优化技术(重绘回流优化、代码分割、虚拟滚动),提升页面流畅度。

  • 培训内容介绍

    1. 性能指标:学习前端性能的关键指标(FCP、LCP、FID、CLS、TTI),理解Core Web Vitals的评估标准。

    2. 性能工具:掌握Chrome DevTools的Performance面板、Lighthouse工具的使用,学会分析性能报告。

    3. 网络优化:学习资源压缩(Gzip、Brotli)、HTTP缓存策略(强缓存、协商缓存)、CDN加速的原理与实践。

    4. 图片优化:掌握图片格式选择(WebP、AVIF)、响应式图片(srcset)、懒加载(loading="lazy")的实现。

    5. 字体优化:学习字体加载策略(font-display)、字体子集化、可变字体的使用。

    6. 代码分割:掌握Webpack/Vite中的代码分割配置,实现路由级别和组件级别的代码分割。

    7. Tree Shaking:理解Tree Shaking的原理,学习通过ES Module写法实现代码摇树优化。

    8. 长列表优化:掌握虚拟滚动(react-window、vue-virtual-scroller)的实现原理与使用,优化长列表渲染性能。

    9. 重绘与回流:理解浏览器渲染过程,学习减少重绘回流的技巧(批量DOM操作、使用CSS类、requestAnimationFrame)。

    10. Web Worker:学习Web Worker的使用,将耗时计算迁移到后台线程,避免阻塞主线程。

    11. 浏览器缓存:了解浏览器缓存机制(Service Worker、Cache API),学习实现离线应用和资源预缓存。

    12. 预加载技术:掌握preload、prefetch、preconnect、dns-prefetch等资源提示的使用。

    13. SSR与SSG:了解服务端渲染(SSR)和静态站点生成(SSG)对性能的影响,学习Next.js/Nuxt.js的基本使用。

    14. 性能监控:学习使用Performance API收集性能数据,了解RUM(真实用户监控)的实现方式。

    15. 调试技术:掌握断点调试(debugger、条件断点)、网络调试、移动端调试的方法。

    16. 内存泄漏排查:学习使用Memory面板分析内存使用,识别和解决内存泄漏问题。

 

专题十六:跨端开发与小程序开发

  • 培训对象:需要开发小程序或跨平台应用的开发者、希望一套代码多端复用的前端工程师。

  • 培训目标

    1. 理解跨端开发的概念与解决方案(React Native、Flutter、Uni-app),掌握跨端技术的选型原则。

    2. 掌握微信小程序的开发流程与核心API,能够独立开发完整的小程序应用。

    3. 学习Uni-app多端开发框架的使用,实现一套代码发布到多平台。

  • 培训内容介绍

    1. 跨端开发概述:了解跨端开发的需求背景(多平台覆盖、开发效率),认识主流跨端方案的特点与对比(React Native、Flutter、Uni-app、Taro)。

    2. 微信小程序简介:了解微信小程序的发展历程与生态,认识小程序的核心优势(即用即走、入口丰富)。

    3. 小程序开发环境:学习注册小程序账号、安装开发者工具、创建第一个小程序项目。

    4. 小程序目录结构:理解小程序的目录组织(pages、components、utils、app.js、app.json、app.wxss)。

    5. 小程序配置:掌握app.json的页面注册、窗口表现、tabBar配置,了解page.json的页面级配置。

    6. WXML模板:学习小程序的WXML语法(数据绑定、条件渲染、列表渲染、模板引用)。

    7. WXSS样式:掌握小程序的尺寸单位(rpx)、样式导入、选择器、Flex布局的使用。

    8. JS逻辑层:学习Page生命周期函数、数据操作、事件处理,掌握setData的使用与性能注意事项。

    9. 小程序组件:掌握常用基础组件(view、text、image、button、input、scroll-view)的使用。

    10. 小程序API:学习常用API(网络请求、本地存储、路由跳转、用户授权、支付)的调用。

    11. 小程序云开发:了解云开发的概念,学习云函数、云数据库、云存储的使用。

    12. Uni-app概述:了解Uni-app作为Vue.js多端开发框架的特点,掌握其设计理念(编译到多端)。

    13. Uni-app项目创建:学习使用HBuilderX创建Uni-app项目,理解项目目录结构。

    14. Uni-app开发:掌握Uni-app的组件、API、条件编译的使用,实现一套代码适配多端。

    15. Taro框架:了解Taro作为React多端开发框架的特点,学习Taro的基本使用。

    16. 小程序发布:学习小程序的上线流程(提交审核、版本管理),了解运营数据的查看方法。

 

专题十七:前端框架项目实战

  • 培训对象:需要综合运用前端技术栈、完成完整项目开发的开发人员。

  • 培训目标

    1. 掌握企业级项目开发的全流程(需求分析、技术选型、环境搭建、代码编写、测试部署)。

    2. 能够综合运用Vue/React、路由、状态管理、UI组件库完成一个完整的业务系统。

    3. 学习项目规范、代码组织、团队协作的最佳实践。

  • 培训内容介绍

    1. 项目一:Vue实战 - 电商后台管理系统:使用Vue3 + TypeScript + Element Plus + Pinia开发完整的电商后台管理系统。

    2. 需求分析:学习阅读产品需求文档,进行功能模块划分(用户管理、商品管理、订单管理、数据统计)。

    3. 技术选型:根据项目需求选择合适的技术栈(Vue3、TypeScript、Pinia、Vue Router、Element Plus)。

    4. 项目搭建:使用Vite创建项目,配置ESLint、Prettier、别名、环境变量。

    5. 布局组件:实现后台管理系统的整体布局(侧边栏、头部、内容区),封装Layout组件。

    6. 路由配置:配置路由表,实现嵌套路由、路由守卫(登录验证、权限控制)。

    7. 登录功能:实现登录页开发,对接登录接口,存储Token,实现请求拦截。

    8. 状态管理:使用Pinia管理用户信息、权限信息、全局状态。

    9. 用户管理模块:实现用户列表展示、分页、搜索、新增用户、编辑用户、删除用户功能。

    10. 商品管理模块:实现商品列表、商品分类、商品上架、商品编辑功能,使用富文本编辑器。

    11. 订单管理模块:实现订单列表、订单详情、订单状态更新功能。

    12. 权限控制:实现基于角色的权限控制(按钮级权限、路由权限)。

    13. 数据可视化:使用ECharts实现销售趋势图、订单统计图等仪表盘页面。

    14. 项目二:React实战 - 内容管理系统:使用React 18 + TypeScript + Ant Design + Redux Toolkit开发内容管理平台。

    15. 项目架构:掌握React项目的目录组织方式,封装通用组件和工具函数。

    16. 自定义Hooks:编写自定义Hooks(useTable、useForm、useModal)封装通用逻辑。

    17. 前后端联调:学习使用Axios封装请求,处理请求/响应拦截器,管理API接口。

    18. 项目优化:进行代码分割、路由懒加载、虚拟滚动等性能优化,使用Lighthouse分析性能。

    19. 打包部署:配置生产环境构建,部署到服务器(Nginx)或云平台(Vercel、Netlify)。

 

专题十八:大厂面试专题与职业发展

  • 培训对象:准备求职前端岗位的在校学生、转行人员、需要提升面试通过率的在职开发者。

  • 培训目标

    1. 系统梳理前端面试的核心知识点(HTML/CSS、JavaScript、框架、网络、性能)。

    2. 掌握面试常见题型的解题思路与答题技巧(理论题、手写题、场景题、算法题)。

    3. 了解大厂面试流程与简历优化方法,规划前端职业发展路径。

  • 培训内容介绍

    1. 面试流程解析:了解大厂前端面试的典型流程(简历筛选、电话面试、在线笔试、技术一面、技术二面、HR面),各环节的考察重点。

    2. HTML/CSS高频题:语义化标签、盒模型、BFC、浮动清除、定位、Flex/Grid布局、响应式设计、移动端适配。

    3. JavaScript高频题:数据类型、闭包、原型链、作用域、this指向、事件循环、Promise、async/await、防抖节流、深拷贝浅拷贝。

    4. 手写题系列:手写防抖函数、节流函数、深拷贝、Promise、call/apply/bind、数组去重、数组扁平化。

    5. 框架高频题:Vue生命周期、响应式原理、nextTick原理、Vue-Router原理、Vuex原理;React Fiber、Diff算法、Hooks原理。

    6. 网络高频题:HTTP/HTTPS协议、TCP三次握手/四次挥手、浏览器缓存、跨域解决方案、WebSocket。

    7. 性能优化高频题:首屏加载优化、代码分割、懒加载、虚拟滚动、重绘回流优化、性能指标。

    8. 工程化高频题:Webpack/Vite原理、Loader与Plugin区别、Tree Shaking原理、Babel原理。

    9. 安全高频题:XSS攻击、CSRF攻击、SQL注入、HTTPS加密。

    10. 算法基础:掌握常见算法题型(数组去重、排序、字符串操作、递归),学习时间复杂度和空间复杂度分析。

    11. 场景题:设计一个前端项目架构、处理大规模数据渲染、实现权限控制、设计组件库。

    12. 简历优化:学习如何编写技术简历(项目经验描述、技能清单、STAR法则),突出个人亮点。

    13. 开源贡献:了解参与开源项目的价值与途径,学习如何提PR、参与社区讨论。

    14. 职业发展路径:了解前端工程师的成长阶段(初级→中级→高级→专家),不同阶段的能力要求。

    15. 技术栈拓展:了解前端技术的发展趋势(Serverless、边缘计算、WebAssembly、跨端技术)。





如果您想学习本课程,请预约报名
如果没找到合适的课程或有特殊培训需求,请订制培训
除培训外,同时提供相关技术咨询与技术支持服务,有需求请发需求表到邮箱soft@info-soft.cn,或致电4007991916
技术服务需求表点击在线申请

服务特点:
海量专家资源,精准匹配相关行业,相关项目专家,针对实际需求,顾问式咨询,互动式授课,案例教学,小班授课,实际项目演示,快捷高效,省时省力省钱。

专家力量:
中国科学院软件研究所,计算研究所高级研究人员
oracle,微软,vmware,MSC,Ansys,candence,Altium,达索等大型公司高级工程师,项目经理,技术支持专家
中科信软培训中心,资深专家或讲师
大多名牌大学,硕士以上学历,相关技术专业,理论素养丰富
多年实际项目经历,大型项目实战案例,热情,乐于技术分享
针对客户实际需求,案例教学,互动式沟通,学有所获
报名表下载
联系我们 更多>>

咨询电话010-62883247

                4007991916

咨询邮箱:soft@info-soft.cn  

 

  微信咨询

随时听讲课

聚焦技术实践

订制培训 更多>>