AI时代，前端需求暴增
课程循序渐进稳步提升 助你从小白变成白领精英
课程大纲及学习安排【详细版】
专业一结构样式
学习目标:
1、提升实践能力：通过实际项目或练习，能够独立完成HTML和CSS的网页设计和布局。
2、掌握进阶知识：掌握设计的原理和技术，以及常用的CSS框架，能够编写复杂的网页布局。
3、熟悉并掌握HTML5和CSS3的新增特性
主讲内容：
1、HTML基础知识
HTML的基本概念和作用。
HTML文档的基本结构，包括<html>、<head>、<title>、<body>等标签。
常见的HTML标签，块元素和内联元素。如段落<p>、标题<h1>至<h6>、列表<ul>和<ol>、<dl>、链接<a>、图片<img>、<span>等等。
HTML5新增的语义化标签，如<header>、<footer>、<article>、<div>等。
表单的各种组件标签及标签属性，包括html5新增表单标签
2、CSS基础知识
CSS的基本概念和作用。
CSS的选择器，各种原生选择器和关系类选择器
css3.0新增选择器，各种伪类状态选择器和伪类元素选择器
CSS的文本属性如颜色color、字体font-family、字体大小font-size、行高、对齐、加粗、倾斜、下划线等
CSS的盒模型，包括内容宽高、内边距、边框和外边距，以及背景background
CSS的布局方式，如流式、浮动布局、定位布局、Flexbox布局和Grid布局。
Css的BFC、iconfont、css sprites等技术
CSS3.0中新增加的圆角、阴影、渐变、变形，动画、关键帧等
3、HTML和CSS的最佳实践
遵循Web标准和语义化代码的原则。
学习代码sass的样式代码开发方法。
掌握常见的网页布局模式，如单栏、双栏、三栏布局。
掌握Flexbox和Grid布局的应用。
对标项目：
创建个人简历、博客等静态网页项目。
使用HTML和CSS创建一个个人网站或项目页面。
制作各种电商和门户网站的项目页面。
核心技术栈：HTML、CSS
专业二JavaScript前端开发上
学习目标:
1.熟练掌握JavaScript语言的基础编程，深度理解JavaScript语言的思想
2.灵活运用JavaScript语言来实现页面的交互效果
3.能够独立完成各大门户网站、APP中的前端交互效果
主讲内容：
基础语法、变量与数据类型、运算符、控制结构、函数、对象与数组、事件处理与DOM操作、Math 对象、Date 对象、数组方法、字符串方法、算法基础、工厂模式
对标项目：
各大网站、APP中的页面交互效果，例如：JD秒杀倒计时、拼多多幸运抽奖
核心技术栈：JavaScript
专业三JavaScript前端开发下
学习目标:
理解和掌握原生js的编程思想,掌握原生js中的使用语法,熟练使用语法进行前端页面的交互实现,掌握js高级部分的原理,能在开发过程中熟练使用,为后面的框架学习打好基础
主讲内容：
ES6语法、浏览器对象模型、文档对象模型、事件类型、高阶函数、面向对象编程思想、构造函数、类的创建和使用、共有私有静态属性和方法、闭包原理、深浅拷贝、继承、事件轮询、发布订阅模式、后端服务器的搭建、同源策略和跨域、防抖和节流
对标项目：
各大网站、APP中的页面交互效果，例如：JD轮播图、电商类购物车、楼层、分页、放大镜等效果
核心技术栈：JavaScript进阶课程
专业四服务端开发与脚手架初识
学习目标:
1.熟练掌握Vue3全家桶、前后端数据交互、Vue-router、Vite等
2.具备独立思考、开发综合型后台管理系统的能力.
3.能独立完成各大电商、App的后台管理系统，例如：新峰商城管理系统、七尾医疗服务后台管理系统、新零售电商后台管理系统
主讲内容：
Vue3基础指令、计算属性、Watch监听、Vue/cli、组件、axios二次封装、组件库（ElementPlus）、Vue-router、自定义HooKs、缓存组件、登录业务、用户管理业务、商品管理业务、订单管理业务
对标项目：
JD(京东)后台管理系统
项目亮点:
项目亮点：中国最大的自营式在线零售商之一，提供广泛的商品贺服务，包括电子产品、家电、时尚、食品、图书、家具用品等。该项目具有商品管理、订单管理、运费模板、会员管理、内容管理、权限管理功能，该项目能够满足多种电商后台管理系统的核心功能
项目核心模块：登录模块、用户管理模块、订单管理模块、商品管理模块。
核心技术栈：Vue3+Vite+ElementPlus+axios+Vue-router
专业五渐进式开发
学习目标:
1.熟练掌握Vue3全家桶、前后端数据交互、Vue-router, Vite, Vant, Pinia ，支付
2.具备独立思考、开发综合型移动端电商系统的能力
3.能独立完成移动端电商系统，例如：京东商城，多点超市
主讲内容：
Vue3进阶，自定义hooks，Vant，支付，登录，页面拦截等等
对标项目：
JD(京东)移动端
项目亮点:
项目亮点：电商系统作为一个综合性平台，通过多渠道销售、个性化推荐算法、安全高效的支付体系、实时库存管理与智能物流配送、全面的客户服务与售后支持、数据驱动的营销策略和用户行为分析、社交化分享与互动评价等一系列复杂功能的有机结合，为用户提供了一个完整的购生态系统，实现了商品的快速销售、用户体验的优化和商家运营的精细化管理
项目核心模块：登录模块，列表模块，我的模块，支付模块，详情模块
核心技术栈Vue3+Vite+Vant+axios+Vue-router+支付
专高一vue3项目实战
学习目标:
1.熟练掌握vue3、前后端数据交互, vue-router、Vite、element-plus等
2.具备从0-1开发项目的能力
主讲内容：
vite+vue框架构建、组合式API的基本使用
element-plus UI库使用
vue-router 路由管理
环境变量、封装自定义指令
高德地图、webSocket学习使用
对标项目：
宏烨找房后台系统、
项目亮点:
宏烨找房后台系统：1、能够实现对大量房源信息的集中管理，包括房源的基本信息（如地址、面积、户型等）、房屋图片、租金价格、租赁状态等的快速录入、编辑和查询，方便工作人员及时更新和维护房源数据，确保信息的准确性和时效性。2、详细记录用户的注册信息、浏览历史、收藏房源、预约看房记录等，便于深入了解用户需求和行为习惯，从而为用户提供更精准的房源推荐和个性化服务，提高用户的找房体验和平台的用户粘性。3、对租房订单的全流程进行管理，从用户下单、支付租金、签订合同到入住和退租等环节，都能在后台系统中清晰地跟踪和处理，确保租赁交易的顺利进行，提高运营效率和管理水平。4、系统可以生成各种数据报表，如房源出租率统计、用户地域分布分析、租金价格走势等，为企业的决策提供数据支持，帮助企业更好地把握市场动态，制定合理的业务策略。
项目核心模块:
vue3框架构建、登录注册、列表增删改查、地图、客服聊天、图表
核心技术栈vue3+Vite+element-plus+axios+vue-router+webSocket
专高二多端开发
学习目标:
1.熟练uniapp开发H5/多端小程序/app等多端应用、前后端数据交互、云函数/云数据库、地图、支付、聊天、threejs实现VR效果等功能
2.具备独立使用云函数操作云数据库实现找房业务,查看房源图片详情以及VR看房,与客服聊天沟通房源信息前后端的实现,结合地图完成房源搜索并进行购买支付
3.能独立完成找房租房类小程序/H5项目的开发，例如：贝壳找房、安居客、我爱我家等
主讲内容：
ue3基础语法及指令、ref/reactive定义响应式数据、v-for/v-if/v-show、动态绑定class、组件封装以及传值、uniapp页面以及应用级生命周期、条件编译、内置组件、组件库（UView-plus）、基础api的使用、uni.request二次封装、Promise使用、定位以及地图相关功能、登录业务包括授权登录和手机号验证码登录、支付、VR看房功能
对标项目：
贝壳找房
项目亮点:
集成了找房/租房/买房/房屋出租/房屋出售,以及各种条件如地图/价格等进行房源的筛选,通过VR更好的了解房源信息,并能与客服进行聊天沟通房源信息,最后购买支付
项目核心模块：授权登录模块/手机号验证码登录模块、客服聊天、地图找房、云函数查询房源列表以及触底加载下一页和下拉刷新、VR看房
核心技术栈:uniapp+Vue3+uview-plus+websocket(socket.io)+threejs
专高三组件化开发
学习目标:
1.熟练掌握react技术框架
2.具备书写函数组件、类组件的能力
3.能独立完成框架搭建、后台常见业务，例如增删改查，rbac，图表数据可视化
主讲内容：
react框架入门、函数组件、类组件基本使用、 antd UI库使用、react-router-dom 路由管理、常用内置hook的学习使用、自定义hook、高阶组件、redux、 echarts 图表数据可视化、高德地图 api
对标项目：
八维票务后台管理系统
项目亮点:
该项目具有登录、 车次管理、线路管理、订单管理、路线轨迹回放、首页大屏可视化，该项目能够满足react主流后台管理类项目绝大多数功能 。
项目核心模块：项目搭建模块 、登录+rbac模块、 echarts图表模块、增删改查、地图模块
核心技术栈:React + Antd + react-router-dom + redux + echarts + 高德地图api
专高四react高级程序设计
学习目标:
1.熟练掌握react、前后端数据交互, react-router、Vite等
2.具备从0-1开发项目的能力可视化
主讲内容：
React框架构建、函数组件、类组件基本使用
antd UI库使用
react-router-dom 路由管理
常用内置hook的学习使用
自定义hook、高阶组件
redux 学习使用
对标项目：
同程旅行
项目亮点:
同程旅行是满足用户旅游需求的一站式平台。秉持“让旅行更简单、更快乐”的使命，同程旅行主要通过包括其腾讯旗下平台、自有移动应用程序、轻应用及其他渠道在内的线上平台，为用户提供几乎涵盖旅游所有方面的全面创新产品和服务选择，包括交通、住宿、景点门票预订及各种配套增值旅游产品及服务，旨在满足用户在整个旅途中不断变化的旅游需要\
项目核心模块： React框架构建、登录注册、车票搜索、抢票,智能客服,订单支付
核心技术栈react18+Vite+antd+axios+react-router
专高五react项目实战
学习目标:
react进阶应用，了解掌握核心的框架原理，对项目的实现采用高阶应用，实现对应的创作平台的业务内容
主讲内容：
虚拟滚动、多语言切换、react源码讲解、toolkit集成、git flow/git chreey pick、自定义hook、vite、支付宝支付
对标项目：
掘进小册
项目亮点:
动态翻译页面支持100多种语言，可支持上万条列表数据的渲染。
项目核心模块： 多语言切换，文章列表模块，文章详情模块
核心技术栈：react高阶+有道openapi +git高阶+rtkquery
专高六高级程序设计
主讲内容：
1.可视化大屏应用场景分析，如企业数据监控、智慧城市管理、金融数据分析等，使学员了解不同行业需求与特点。前端可视化技术选型探讨，对比 Echarts、D3.js 等主流可视化库的优劣，以及如何根据项目需求确定合适的技术框架与工具。
2.Vue 框架的核心概念强化，包括组件化开发、数据绑定、指令系统、Vue 路由原理与应用、Vuex 状态管理模式、等基础知识回顾与深入讲解，确保学员扎实掌握 Vue 基础。
3.React 核心概念讲解，如组件、JSX、虚拟 DOM、生命周期、React Hooks 深入学习、React Router 路由管理、等基础内容回顾与深入剖析，帮助学员深入理解 React 工作原理与开发模式。
4.引入实际的项目案例，涵盖 Vue 和 React 两种技术栈的应用，从项目需求分析、技术选型、架构设计到开发实现、包括代码规范制定、版本控制（如 Git 工作流）、代码审查等实践经验分享测试部署等全流程讲解与实践操作，让学员深入体验真实项目开发过程。
实训（一）项目实训
学习目标:
1.熟练掌握Vue3全家桶、前后端数据交互、Vue-router、pinia、Vite、nodejs、axios、git、websocket、排版布局、多种移动端适配方案等
2.锻炼项目综合开发能力、前后端接口联调，掌握多种移动端适配方案以及优缺点， 语音识别、图片文字识别以及后端接口编写能力等
3.能独立完成各种项目类型的开发，移动端、pc端，掌握vue、react等框架以及常用ui组件库的开发使用，例如：维度健康移动端、维度健康管理后台、threejs3D展厅，数字人直播项目等
主讲内容：
vue3基础以及全家桶、移动端适配、聊天室、管理后台等
对标项目：
维度健康
项目亮点:
该项目的初衷是利用医疗 APP搭建起医疗机构和患者之间的桥梁，能够为患者提供更好的医疗体验，最大化满足市场和用户对于疾病问诊咨询、常见疾病的解决方法、常用药物的使用原则、以及有相同疾病的患者之间的沟通交流，同时患者也可通过健康讲堂对自己感兴趣的知识进行了解，同时满足医生能够利用app实现在线问诊，提供更便捷的在线医疗服务。
项目核心模块：登录注册模块、患者模块、医生模块、在线问诊模块、在线商城模块以及管理后台等。
核心技术栈:
移动端：Vue3+Vite+vant+axios+Vue-router+pinia+websokcet+git
后台管理系统：react+ant+redux+axios
后端：nodejs + mysql + websocket + koa
实训（二）项目实训
学习目标:
1.掌握THREEJS基本概念，完成模型的导入和动画实现。
2.完成语音识别和文字的相互转换
3.完成Ai-chat聊天基础效果
4.使用React全家桶
主讲内容：
（1）使用 react hooks 开发项目，让学生在实际项目中，增加对于 hooks 真实开发项目的能力，掌握如何自定义 hooks， 使用 hooks 封装各种组件等。
（2）熟练应用 ant-design 组件库，掌握全球使用量第二的前端 UI 组件库，并且具备 可以进行二次开发的能力，比如基于 ant-design 的表格组件，根据项目中产品需求，二次 开发封装表格组件等。
（3）基于 git + pnpm+eslint+prettier+vite 完成项目中工程化能力的掌握，使用 pnpm 管理 npm 依赖包或者自己封装根据需求封装 npm 包。
（4）熟练应用 Three.js 技术进行 3D 可视化的编写，同时使用 axios 与后端大模型进行交互， 掌握开发大模型前端的能力。
（5）选择 Vite 作为项目的前端构建工具， 加强学生对项目整体的优化能力，尤其是 C 端，以及使用 Vite 优化项目的能力。
（6）选择 Docker 选择项目部署开发方案，解决 node 版本不一致以及依赖包不一致，
对标项目：
Three.js 3D虚拟客服
项目亮点:
（1）选用市场上主流的 React+Typescript+Vite+Docker 技术栈为基础，学生能够 通过学习该项目， 掌握大型企业前后端项目架构，具备开发大型真实项目的能力。
（2）使用 blender 开发数字人模型，训练学生们对 3D 数字人的开发思路，同时能够使用 Three.js 实现数字人的加载和交互。
（3）选择使用 axios 选择前端和后端大模型的通信方式，让学生们学会使用 axios 和大模型进行交互的能力，能够让学生进入企业，具备开发大模型前端的能力。
核心技术栈：React 全家桶 + THREE全家桶 + 第三方服务
