前端学习路径

菜鸟感觉很多人不太知道菜鸟写的博客是一个可以跟着学习、一起深入理解的过程，其中包括了菜鸟从刚开始学习到后面重新学习，再到后面进入学框架等一系列学习过程、知识和感悟，所以菜鸟把自己的博客整理成一个目录提取出来，好让读者跟着进度一起学习，这些文章早就写了，所以有不足的地方还望读者指出，菜鸟来更改！

这里菜鸟会把建议一起学习的进行标注，这种建议一起学习的是因为没有对应的学习资料，是菜鸟总结的，还有部分可能菜鸟有学习地址或者有视频可以参考学习的，那菜鸟会放上链接，读者可以边看别的边参考菜鸟写的，积极沟通更能促进进步，也能避免理解错误！

注意：
看本篇文章或者里面的文章的时候，如果有跳转链接，建议放一放，如果记得链接里面讲的内容最好，不记得就先看完，然后回过头跳转了看！

重学html 目录 - 建议一起学习

这个建议有html、css基础的同学跟随着一起学习！纯小白的话（连标签、html都不知道是什么的）可能有点看不懂。

1. 重学前端 h多大 / 网页内容（html，body，head）/ element.style（第一天）
2. 重学前端 p多大 / 浏览器最小文字 / 详解img / object-fit和object-posit / 详解map / 空白区域 / 文字与图片对齐 / vertical-align（第一天）
3. 重学前端 概括元素（行内元素,块元素,行内块元素）和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css] / 详解分割线hr标签(初见border / 详解auto)（第二天）
4. 重学前端 段落的空格解析/br和wbr/常见文本格式化标签/详解pre（white-space）/q（初见lang）/对比bdo和bdi/详解a（target cursor 链接- id）（第三天）
5. 重学前端 详解头部（title base link style meta script/noscript）（第三天）
6. 重学前端 样式(text-align)/ 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列 ）（第四天）
7. 重学前端 详解列表（list-style-type list-style-position 自定义列表 dl list-style-image list-style li的源css）（第五天）
8. 重学前端 详解表单 / 详解input / 浏览器私有前缀的作用（第六天） - 这篇文章很长
9. 重学前端 重要且实用的HTML5新语义元素（mark标记文本/progress任务进度/meter度量衡/是否可编辑内容/details补充/已移除）（第七天）

到这里就有js相关内容，需要读者具备function等js知识！

11. 重学前端 浏览器支持（添加新元素）/ 拖放（第八天）
12. 重学前端 HTML5 Web 存储（缓存）其他已经废弃（第八天）
13. 重学前端 全局属性（第八天）
14. 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
15. html新增标签 2021/1/30
16. disabled和readonly 以及焦点问题

重学CSS 目录 - 建议一起学习

1. css实例 css中id/class 详解样式表（外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解）[第一天]
2. 详解background（background-color background-clip background-image 渐变函数）[第一天]
3. 详解文本格式（Text）[第二天]
4. CSS 字体[第三天]
5. 链接样式 列表样式 表格样式[第三天]
6. 盒子模型（一）：初识盒模型 、 边框 [第四天]
7. 盒子模型（二）：外边距和填充、详解轮廓（第五天）
8. css 单位 和 css 尺寸 [第六天]
9. CSS display(显示)详解 与 visibility（可见性）详解[第七天]
10. css Position(定位) [第八天] - 其中有个问题还望读者可以积极讨论
11. css overflow / float [第九天]
12. css 伪类 / 伪元素 选择器 [第十天]
13. 属性选择器 补充第一天 2021/2/2
14. 响应式布局 2021/2/2
15. css取%时以谁为基准 + 画0.5px线 + 画三角形

上述这两个部分，是当时菜鸟学习完了前端html+css+js（es6），但是感觉自己什么都不会，于是沉下心来重新照着 菜鸟教程 一个一个看然后学完了，才感觉自己会点东西了！

当然其实并不完善，后续还会补充！大家也可以看菜鸟教程，虽然老了，但是比MDN方便，后续学习可以看MDN！

js部分

js菜鸟当时是直接看的：廖雪峰es6官方网站，这个菜鸟学了好久才学完，因为要每个都会用，es6真的很重要！

js一些比较重要的知识的理解建议看下面的书，也可以结合菜鸟的专栏（菜鸟这里不想搞目录了，麻烦）：JavaScript

es6 - es13 - 建议学习

学完这个 es6 之后，建议学习菜鸟在b站学习的 es6 - es13新特性，毕竟现在前端太卷而且真的寒冬了，只会 es6 不够看了，这个是菜鸟的笔记：
千锋教育最新版Web前端ES6-ES13教程，JavaScript高级进阶视频教 - 建议边看菜鸟的笔记边学习

推荐书籍

学完上述部分，建议看几本书：

• JavaScript语言精粹
• 你不知道的JavaScript（三本）
• 红宝书 和 犀牛书

git 部分

这里菜鸟学习的是：廖雪峰的git教程

这里菜鸟还是把自己的博客目录放一下，感兴趣的读者其实可以结合一起看看

git 目录 - 建议一起学习

1. git学习 git安装 / 创建git仓库 / 文件添加到版本库（第一天）
2. git学习 版本转换（第二天）
3. git学习 工作区和暂存区 / 管理修改（第三天）
4. git学习 撤销修改 / 删除文件（第四天）
5. git学习 GitHub远程仓库 / 使用GitHub（第五天）
6. git学习 分支管理(1)：创建、合并、删除分支 / 复习删除（第六天）
7. git学习 分支管理(2)：解决分支合并冲突（第六天）
8. git学习 分支管理(3)：分支管理策略——禁用Fast forward模式（分支图）（第七天）
9. git学习 自我研究：分支与分叉（第八天） - 建议看透
10. git学习 分支管理(4)：bug修复分支（其它分支类比）（第九天）
11. git学习 分支管理(5)：多人合作（第十天）
12. git学习 标签管理（第十天）
13. git学习 自定义git（第十一天 ） - 建议看完

注意：

菜鸟建议各位不能只学git，还要把 gitLab 和 svn 学会，最起码基本操作要会！工作中真的有用！

框架部分

菜鸟在学完上述部分后，最先学习的是微信小程序，直接看的腾讯官网学习的，学习完了之后学习 vue 发现事半功倍，所以菜鸟也建议大家，如果 vue 看不懂，可以先学习原生微信小程序！

这里直接看：微信小程序官方文档

这里菜鸟在学微信小程序的时候也写了部分博客，这里给个目录

微信小程序目录

1. 微信小程序：你必须知道的component自定义组件
2. 微信小程序：必须知道的变量作用域 - 这个建议都看看，变量作用域js里面一样的
3. 微信小程序项目遇见问题二：变量作用域（续）| 使用data中的数组赋值给变量b，改变b的值，数组改变的解决方法| js基本类型和引用类型的区别| 变量命名冲突 - 这个建议都看看，同上
4. 微信小程序：带component后的生命周期
5. 微信小程序自我总结2，图片上传和Promise（微信小程序获取地理位置 微信小程序上传图片 微信小程序云存储 微信小程序setData性能）
6. 最简单的自定义tabbar
7. 微信小程序最终总结
8. 微信小程序项目遇见问题一：图片调试器显示，真机不显示
9. 微信小程序项目遇见问题三：有时候undefined不一定就是undefined | 解决微信小程序每次request请求，Cookie不一样 | request 获取不到返回值
10. 微信小程序WxPrase中包含文件无法点击解决
11. 微信小程序 自定义导航栏
12. 微信小程序 app.js和首页请求先后问题解决

vue - 建议一起学习

当然看微信小程序之前，最好还是先学 vue，那样微信小程序就可以使用 uniapp 开发了，避免多学东西！

现在基本上没有好的vue3教程在市面上流通，所以找不到资源的话，还是可以学习vue2先。

毕竟喜欢上vue2的风格，vue3也是兼容vue2的，你还是按照vue2的习惯开发vue3都没问题，就是少了一些本来vue2里面就不常用的东西。菜鸟其实感觉vue2的代码整合性更好；vue3灵活，但是如果把相关的东西放一起，那就类似于vue2了。

现在千峰、黑马的视频都不错，虽然说是vue3其实还是vue2写法，读者可以自行选择，菜鸟当时看的是：王红元的vue2教学，这个就只有vue2写法！

对应的目录，菜鸟已经搞了，可以直接访问：vue学习路径 - 最全最新Vue、Vuejs教程，从入门到精通，这个目录里有vue3视频推荐，这里就不写了！

scss / less

学完上面的，大部分读者可能会在学习过程中听见scss、less等，也可能会是自己感觉css不够方便了，这个时候就要学习scss 或 less中的其中一个了，建议学习 scss，因为其实差不多，但是 scss 体量更大！

这里菜鸟看的视频是这个的最后一部分：千锋教育JavaScript全套视频教程（10天学会Js，kerwin前端javascript入门必备）

但是笔记做在了这里：Vue3 + vite + Ts + pinia + 实战 + 源码 + electron – 跳转后搜索 scss 就行

其实重要的就是嵌套，因为变量什么的css里面有，然后就是循环、判断等基本上用得比较少！

提升部分

上述学完了，基本上和 vue 相关的前端都学完了，然后学习一下vue相关的必要的插件、组件什么的，例如：swiper、element 等，反正多了解一些，遇见困难知道用什么插件更好解决就比较好了！

学到这里，基本上就是初级前端了！

如果还想继续发展，自然要会算法、设计模式、手机端适配、webpack / vite、three.js、http、性能优化、docker、react、数据库、网络安全等，但是菜鸟只找到了算法、设计模式的好的白嫖视频。

js算法 目录 - 建议一起学习

这里是js的算法，菜鸟之前写了博客，学了一点，但是现在好久没更新了，目录先放着，后面有时间更新，视频地址：coderwhy的JavaScript数据结构与算法，建议配合视频一起看

1. js 数组（总结）
2. js 栈
3. js 队列
4. js 优先级队列
5. js 链表 01
6. js 链表 02
7. js 双向链表 01
8. js 双向链表 02
9. js 集合
10. js 哈希表 01
11. js 哈希表 02

js 设计模式 - 建议一起学习

这里菜鸟推荐前锋教育的课程，菜鸟的笔记链接：
千锋教育web前端进阶JS内功修炼之JavaScript设计模式

手机端适配

1. 使用px2rem不生效
2. 常用代码：vue监听路由变化、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper等
3. vue适配思路
   
   px转化rem工具可以使用postcss-px2rem，参考：vue-cli3中PC端大屏自适应
4. 百分比开发 / 响应式布局

注意：

这些花里胡哨的都是次要的，其实真实的适配只需要对同一类型的进行适配，也就是电脑端就适配各种大小的电脑，手机也是一样，而不会一套代码适配多个平台，只是小厂喜欢缩减成本，而且现在很多插件/ui库确实可以做到，但是最好还是分两套样式，大厂是分两套！

webpack / vite 学习

这里菜鸟感觉遇到问题看看官网就行了，深入学习的话也是看官网，反正基本上学 vue 的视频都会给你讲讲 webpack ，通过 vue 的视频了解就行，这个菜鸟也没深入研究过，基本就是看官网和百度了，只能告诉读者到这里了！

three.js

学完上面的就需要学习一下three.js和webGL，菜鸟只是初步的学习了three.js，会画点简单的图和加载个简单的3d模型，webGL说要看，但是菜鸟感觉没必要，就搁置了！

http

菜鸟这里推荐一本书：《图解http》，建议大家买本实体书并看完！-- 有电子版的也可以分享一下

性能优化

感觉几乎碰不见，碰见了感觉也有人解决了！

docker - 待添加目录

极客时间《左耳听风》中说到：docker是一种趋势！

所以前端也应该学习docker，菜鸟正在学习中，后期会添加目录！

react

菜鸟感觉会 vue 就不想学 react 了，所以一直没学！

数据库

菜鸟感觉后端才学的，所以没有学习！

网络安全

感觉几乎碰不见！

最后，项目总结

做项目一定要像菜鸟一样，遇见问题写博客，不仅加深印象也可以帮助他人，开源才是最叼的！虽然知道付费才能赚钱，但是你的层次达不到，就别想赚钱了，不被淘汰就不错了！

菜鸟这里不想搞目录了，直接把我专栏放这里了：

1. 项目总结专栏
2. vue3专栏

警醒自己

基本上菜鸟的技术到这里就到此为止了，算法、设计模式、手机端适配、webpack / vite、three.js、http、数据库、网络安全、性能优化菜鸟只能说略懂且会改，深层的基本上没仔细研究过，当然也确实没那方面的需求！

菜鸟上班之后就感觉，前端会用就行，感觉自己仿佛学到头了，没有学习的动力，感觉用不到的都不想学，用得到的已经学完了，反正能应付工作就行了！所以菜鸟也在迷茫和彷徨！所以写下这篇文章既可以帮助读者，也可以让菜鸟认清自己！