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