计算机基础✅算法和数据结构算法(Vue/React)上线

计算机基础✅ 算法和数据结构

算法

✅ 计算机网络✅ 操作系统软件开发基础✅ 设计模式⭐️ Git 版本控制✅ Linux 服务器✅ 正则表达式三、前端工程化

目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。

⭐️ 研发流程技术选型初始化开发本地测试代码提交编译、打包、构建部署集成测试发布上线监控运维⭐️ 代码托管✅ Node.JS⭐️ 包管理开发框架开发框架⭐️ CSS 框架⭐️ JavaScript 框架⭐️ Vue⭐️ React❌ Angular✅ Svelte✅ UmiJS封装库⭐️ 组件库数据可视化组件（插件）工具库动效库字体图标库⭐️ 脚手架⭐️ 前端架构设计✅ 服务端渲染BFF✅ 微前端CSS in JS⭐️ CSS 模块化✅ 开发调试内网穿透⭐️ CSS 预编译测试测试分类✅ Mock✅ 测试框架✅ 代码质量开发规范类型校验代码检查代码风格提交规范提交检查构建工具自动化构建打包工具CI / CD部署⭐️ Web 服务器⭐️ Nginx✅ Apache容器✅ DockerKubernetes部署策略监控告警四、前端优化✅ 性能优化性能指标

FCP（First Contentful Paint）

FSP（First Screen Paint）

优化手段

样式优化

JavaScript 优化

动画性能

dns-prefetch

Lazy loading

优化启动性能

用户体验✅ 兼容性浏览器兼容性屏幕分辨率兼容性跨平台兼容性SEO✅ 安全五、前端生态⭐️ 静态站点构建开发博客文档✅ 大前端

描述：前端技术的融合更加紧密，应用的领域也更加广泛，前端领域的内容呈现多样化，除了网站外seo模块的基础知识，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。

移动应用移动应用打包桌面应用小程序跨端开发框架移动端调试✅ Serverless✅ 云开发低代码六、前端求职流程简历面试题库面经面试实战七、前端未来WebComponents我的前端学习路线

虽然上面整理的学习路线知识点非常多，但是大家也别太担心，其实按照一定顺序和方法来学习，并不会很难，聊聊我的学习经历。

1. 快速入门，培养兴趣

刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。

于是，我开始试着死记硬背代码，结果发现背了之后还是不会写。那干脆一不做二不休，直接打开编辑器和教程网站，把之前在线实战时敲过的代码复制粘贴到编辑器中，然后再修改保存，到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换，但起码能看到自己的网页文件运行的效果了。后来，我利用浏览器开发者工具提升了自己开发网站的调试效率，敲出的代码达不到满意的效果时，就再去查，再改，再浏览，最后终于完成了一个留言板网站！

通过这件事，我明白了一个道理，既然记不住知识，那就先别强行记忆，上手多写，忘了就去查不就好了？不要担心自己知识不够做不出来，只要你去试，都一定能实现。

2. 多看多写，巩固基础

在这种操作下，我虽然能使用基础三件套开发简易网站了，但做的很慢，还老出问题。于是，我开始完整地看了几本前端入门和项目实战书籍，有三件套入门的，也有响应式网站设计的，还有 JavaScript 综合讲解的，以及一套完整的视频教程，通过这些来复习巩固之前学过的知识，打好了基础，并且了解了更多实战教程上没见到的知识。

看书和视频的过程中，我跟着做了几个简易的网站，也是边看边做。在这之后，我发现自己渐渐地能够脱离文档来写网站了！

3. 框架学习，学以致用

但是，总感觉开发网站时，什么都要自己写，重复的代码写一大堆，很麻烦。于是，我试着上网搜了解决这些问题的方法，发现可以用组件库减少重复编写 HTML 和 CSS 代码，于是学了 LayUI，其实和之前一样的，就是打开官网找到要用的组件，然后复制到项目中修改就行了，写的多了竟然还真记住了一些（虽然这个没必要记）。

界面和样式代码简化了，但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习，当时先看了本书叫《锋利的 jQuery》来学习 jQuery，学会之后使用它趁热打铁做了几个网站，发现的确能大大简化繁琐的 JavaScript DOM 操作，让我尝到了甜头，又有了继续学习前端的动力。

在那之后大概半年，我开始学习主流前端框架 Vue，也是跟着视频教程学，并且结合 ElementUI 组件库开发了一个响应式网站。不得不说，习惯了用原生 JavaScript 和 jQuery 开发后，再去用 Vue 开发，真的是爽飞了，小有成就感。

4. 根据需要，自主学习

在那之后，我就是通过不断地做项目来积累经验，既然编程知识太多学不完，那我就随需随学，逐渐拓宽自己的知识面。举个例子，我要做一个移动端 H5 页面，那就去搜 Vue 的移动端组件库，学会了 MintUI、VantUI 等；项目中要处理日期，那我就去搜日期处理库，学会了 Moment.js；项目重复文件和代码太多，我就去网上搜一些组件化、模块化的最佳实践；项目代码太大、加载太慢，我就去网上搜一些前端压缩、性能优化的方式；要把开发好的项目变成 APP，那我就去网上搜到了 Cordova 等打包工具；跟其他同学一起做项目时比较混乱、开发效率低，我就去搜了一些代码规范、前端工程化等；遇到 Bug 时，也是自己去网上搜索解决方案，并且还要看看有没有知识点是我遗漏的，我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题，我始终保持着学习的积极性，学到了越来越多前端的知识，并通过归纳总结来加深印象。

5. 渐入佳境，拓宽视野

在那之后，我学前端技术非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学，随学随用。此外，我不仅仅关注前端网页开发本身，还同时关注前端的生态和发展，学习了微前端、Serverless、云开发、低代码等技术，因此个人的能力提升也很大。如今在鹅厂工作中也是，面对各种不同技术栈的前端项目，我都能迎难而上，毕竟不会就学嘛！

哦，写的渐入佳境，我都忘了，自己是一名后端工程师，还搁这儿吹牛逼呢（ 所以本路线难免会有不专业的地方，请大家见谅~

6. 总结

总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！

尾声 – 持续学习优秀前端人的特质学习资源前端资讯技术博客学习要点

在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线图 + 在线网站。

大家冲鸭！

如果觉得有帮助，求朋友们 点赞 支持下，给俺点创作的动力 ❤️

您好，我是鱼皮，98 年生，有野心的天蝎座，20 届本科毕业加入 腾讯，从事全栈应用开发，同时也是 腾讯云开发高级布道师 。

我热爱学习和分享编程技术，在公众号、抖音、B 站、知乎、GitHub 等多个平台创作（都叫 “程序员鱼皮”），全网累计收获近 20w 粉丝的关注。

我熟悉多种编程语言和技术栈，包括但不限于 Java 后端、前端、小程序开发，在校期间就带工作室建设了几十个校园网站，以 专业第一 的成绩拿过国家奖学金、挑战杯学术竞赛国奖、上海市优秀毕业生seo模块的基础知识，出版过区块链教材，也曾有过字节跳动、腾讯等三家公司的实习经历，甚至还有段创业经历，并成功积分落户上海。

此外，我独立开发了【编程导航】全栈项目（ code-nav.cn ），已经帮助上万名小伙伴找到优质编程学习资源！

感谢大家的关注~