前端培训注意事项
-
每个阶段没有固定的完成时间要求，完成一个即可进行下一阶段学习。
-
每个阶段的阶段性任务完成后，发送至邮箱：
命名：姓名-前端-第x阶段培训任务
- 每周总结以PPT形式呈现。
汇报内容：学了什么(简洁) + 做了什么 + 尚未解决的问题与不足
命名：姓名-前端-第x周总结
截止时间：每周六23：59前
发送邮箱：
- 学习建议：
选择适合自己的学习方法（效率至上）：
例如：（1）整理学习笔记 （2）对知识点有印象，在需要的时候查官方文档
备注：记笔记可以选择Typora，语雀等
善于利用搜索引擎/AI工具
视频入门 建议多看文档
可以多看看稀土掘金或CSDN上的文章
- 学习顺序建议：
（不用把每个部分完整的学完，很多东西可以回头再学，会豁然开朗）
HTML
CSS
JS语言基础
JS API （了解用法即可）
ES6高阶（高阶部分大部分了解即可）
前端工程化
Node （主要是包管理工具npm）
ajax，Axios，fetch等前后端交互方式 （了解用法即可）（需要学一下Promise相关的 async await等）
Vue3 （选项式 + 组合式写法）
TypeScript
Pinia Vue-Router
AntDesign ， ElementPlus 等ui框架
Uniapp（微信小程序）等
Echarts
（把这些都搞定，项目就基本都可以完成了，前端的东西还是比较多，这只是其中一部分，还需要大家自行探索）
···
前端第一阶段培训
培训内容：
HTML ，CSS基础
CSS部分重点看选择器，基本样式，盒子模型，布局，定位。CSS3部分重点看flex布局，响应式布局。时间充足可以全看。
学习资料：
【1】前端入门HTML，CSS零基础教程
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频_哔哩哔哩_bilibili
【2】MDN官网
https://developer.mozilla.org/zh-CN/
【3】HTML：
W3School：https://www.w3school.com.cn/html/index.asp
菜鸟：https://www.runoob.com/html/html-tutorial.html
慕课：https://www.imooc.com/learn/9
【4】CSS：
W3School：https://www.w3school.com.cn/css/index.asp
菜鸟：https://www.runoob.com/css/css-tutorial.html
慕课：https://www.imooc.com/learn/33
阶段性任务：
- 搭建一个个人静态博客网页（丰俭由人）
附：如果使用到图片资源，可以用图床
2024 最新搭建图床保姆级教程 (PicGo+Typora + 阿里云 OSS) 新手小白一看就会 - 掘金 (juejin.cn)
前端第二阶段培训
培训内容：
JavaScript语言基础
学习资料：
【1】JavaScript教程
黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili
视频1 - 77
【2】MDN官网
https://developer.mozilla.org/zh-CN/
阶段性任务：
-
整理JS语言基础笔记
-
JS基础练习：
(1) 随机输入0-10之间的数,猜数字(猜大了,猜小了,猜对了)
(2) 输入一个整数来判断奇数和偶数（输入的不是整数需做处理）
(3) 判断输入年份是不是闰年
(4) 随机生成4位验证码,大写字母小写字母及数字可供随机选择(比如:kG6y)
附：每个练习单独一个js文件，最后整体打包成压缩包
前端第三阶段培训
培训内容：
DOM,BOM等api，ES6
学习资料：
【1】JavaScript教程
黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili
视频78-151,158-163,169-175,其余部分选择性观看（视频中案例选择性观看）
【2】MDN官网
https://developer.mozilla.org/zh-CN/
【3】补充文档
现代 JavaScript 教程：https://zh.javascript.info/
ES6 入门教程：https://es6.ruanyifeng.com/
阮一峰 JavaScript 教程：https://www.bookstack.cn/read/javascript-tutorial/README.md
阶段性任务：
-
整理笔记
-
实现一个图片轮播图
-
实现一个简易的购物车（可以选择商品，计算总价）
前端第四阶段培训
培训内容：
Ajax ， Axios ，fetch , async ，await
原生ajax请求方式了解即可
学习资料：
【1】Ajax,Axios教程
【2】AJAX Axios Fetch API速通
【3】Axios官网
【4】异步编程: 一次性搞懂 Promise, async, await
https://www.bilibili.com/video/BV1WP4y187Tu/?spm_id_from=333.337.search-card.all.click
【5】一些过渡知识
阶段性任务：
使用axios将下面接口的内容渲染在页面上（可以用cdn引入，也可以用npm）
1.接口如下：
baseUrl: https://sxzgwy.sxzggy.com/api
1720442588675.png
要求：渲染一个列表，展示10个数据即可，不用做分页
2.接口如下：
baseUrl：https://pcapi-xiaotuxian-front-devtest.itheima.net
1720445786573.png
要求：做两个输入框，输入账号和密码，最后显示登录成功/失败
如果登录成功，将token的值存储在localstorage里，键名为Authorization，键值为token的值。
添加一个请求拦截器，从localstorage里获取Authorization，放到请求头中
添加一个响应拦截器，只保留result中的data部分
1720446393094.png
最后将个人信息展示在页面上
前端第五阶段培训
培训内容：
了解Typescrit
学习资料：
【1】了解Typescript
https://www.bilibili.com/video/BV1gX4y177Kf/?spm_id_from=333.999.0.0
【2】TS官网
深入理解 TypeScript：https://jkchao.github.io/typescript-book-chinese/#why
阶段性任务：
1.梳理一下TS的基本用法
前端第六阶段培训
培训内容：
Vue3 （在这里也需要学习基础的前端工程化知识，还有vue的全家桶）
学习资料：
0基础开始的可以看百度网盘里那个Vue教程
或者看这个（不懂的概念需要查一下）：
【1】vue3+TypeScript前端开发教程
https://www.bilibili.com/video/BV1Za4y1r7KE/?spm_id_from=333.337.search-card.all.click
这个难度更高点：
【2】Vue3 + vite + Ts + pinia + 实战 + 源码 + electron
Vue3 + vite + Ts + pinia + 实战 + 源码 + electron_哔哩哔哩_bilibili
或者看文档
【3】Vue官网
简介 | Vue.js (vuejs.org)
【4】组件库：
Element-Plus：http://element-plus.org/zh-CN/
AntDesign：Ant Design - 一套企业级 UI 设计语言和 React 组件库
阶段性任务：
使用Vite + Vue3 compositionAPI + TS + Pinia（+pinia持久化插件） + Vue-router + ElementPlus组件库做一个后台管理系统的demo
要求：
1.有登录注册功能
2.登录后有菜单栏
3.第一个页面公告栏（轮播图）（不用自己实现 用组件库自带的即可）
4.第二个页面Table表格 增删改查 有分页 数据自拟
5.顶部header有头像＆昵称，第三个页面对个人信息修改
前端第七阶段培训
培训内容：
Uniapp + vue3 + ts上手
这个建议是主要看开头，挑拣着看内容，他的文档可以看看，学会开发流程即可
学习资料：
【1】基于Vue3+Ts+Pinia+uni-app的最新组合技术栈开发的电商业务全流程
https://www.bilibili.com/video/BV1Bp4y1379L/?spm_id_from=333.337.search-card.all.click
【2】官方文档：
【3】组件库：
【4】插件市场：
阶段性任务：
前端第八阶段培训（选学）
培训内容：
node后端
可以学习express框架/nest框架等等
学习资料：
【1】node基础 + express框架 + mongodb数据库
【2】nestjs全家桶（拓展）
https://www.bilibili.com/video/BV1NG41187Bs/?spm_id_from=333.337.search-card.all.click
【3】选学：orm框架(用于连接数据库)
prisma：Agent Infrastructure for TypeScript
支线学习内容
json
学习资料：
MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON
正则表达式
学习资料：
【1】菜鸟：https://www.runoob.com/regexp/regexp-syntax.html
【2】在线测试：https://www.jyshare.com/front-end/854/
GIT（会基础使用即可）
学习资料：
【1】官网：https://git-scm.com/docs/git/zh_HANS-CN
【2】视频：
Github 新手够用指南：
40 分钟学会 Git：https://www.bilibili.com/video/BV1db4y1d79C/?vd_source=0c0eede128ce8e27f472460b5389ed13
【3】博客：
基于 VScode 的 git 详细使用指南
手把手教你在VSCode中使用Git
大语言模型的使用
大家应该都会用，列一些好用的网站：
ChatGPT:https://chat.openai.com/auth/login （老牌好用 but需要科学上网）
文心一言:文心一言
天工AI：AI办公智能体先行者
KimiAI:Kimi AI 官网 - K2.6 上线 （国产免费 推荐）
Pinia状态管理库（Vue3官方推荐的状态管理工具）
学习资料：
官方文档：Pinia | The intuitive store for Vue.js
pinia持久化插件：pinia-plugin-persistedstate