初级开发工程师路线

前言

不管从事任何行业都要明白：

千里之行，始于足下。

简而言之，就是要脚踏实地，坚持不懈，不断实践，积少成多。当然学习还需要有兴趣，兴趣是最好的老师，我自己就是对前端比较感兴趣，然后自学然后转行进入前端开发行业。

快速上手

快速上手的目的在于让你了解一个初级前端工程师岗位，在实际工作中都做哪些事。让你对前端开发有一个大致的了解。这和很多教程是不一样的，我会给出4个示例，分别对应4个方向，这或许也是一个初级前端能见到的全部。

本章节为可选内容

工作内容1：企业官网/门户网站

相信你或许看过一些公司的网站，比如：

Apple (中国大陆) - 官方网站(苹果官网)

Xiaomi SU7，Xiaomi 14 Ultra，小米澎湃OS，小米徕卡影像大赛(小米官网)

等等。那么这其实就是门户网站。前端开发的工作之一就是，完成类似于上述的页面开发（当然很多小公司没有UI设计师，就需要前端自己想办法了，这个我们后面说），也就是将设计师给的图稿以代码的方式实现，并且展示到用户眼前。是不是听起来没有一点头绪。来展示一个例子：

https://modao.cc/proto/LAecnW0psnwlf2GVnzq01G/embed/v2/sharing

如上就是设计师给的图，然后我们使用 Html Css Javascript 等技术将页面展示出来，就ok了。快来试试看吧。

有些疑惑，这该从何写起？

稍后补充。

工作内容2：后台管理系统/中后台产品

后台管理系统是前端开发中常见的一类业务，这种管理系统上手是需要一定基础的，今天我们肯定不会详细讲解每行代码的作用，只是演示如何在别人代码基础上进行二次开发，满足公司业务需求。

先展示一个后台管理系统：

Ant Design Vue Admin Pro

我们要做的就是在这个开源项目(开源项目就是让大家都能看到、使用、修改和分享的软件项目，旨在通过共享促进技术进步)的基础上进行二次开发。具体代码细节现在还不用了解，因为这涉及到很多技术，我们用一个成品展示一下：

智珠侠

工作内容3：小程序

一般以微信小程序为主，如果公司业务涉及抖音或者支付宝那么还会有抖音小程序、支付宝小程序等等。不过掌握一个其他都很容易。这里演示一个简单的微信小程序如何创建，开发，上线。

工作内容4：跨端应用

多端开发也叫做跨平台应用程序开发，或许你对于跨平台这个概念不是很理解。这么说吧，我们常见的操作系统有安卓(Android)、苹果(ios、macOS)、Linux发行版(CentOS、Ubuntu、Kali、Deepin)等等。使用跨平台框架开发就能够使得，我们写一套代码可以同时运行在这些平台上。

前端常用的跨平台框架：

1. Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron（Electron）
2. Flutter - Build apps for any screen
3. uni-app官网

其他的还有很多，这里就不一一列举了，随着你学习的深入慢慢会了解。

其实工作中用这类框架，主要还是开发小程序和App。这其中还有很多坑爹的地方，需要在实践中摸索，当然我会提供一些踩坑点帮你避雷，这个后面讲。

以上就是快速入门的内容了，相信你看完已经对前端开发有了一个大致的了解了，如果你感兴趣，那么不妨接着往下看，这些内容都是我从业多年的经验之谈，希望对你有所帮助。另外要说的是，这只是前端开发的很小一部分，前端还有很多领域，比如区块链、智能合约、以太坊、游戏开发(页游)、NodeJS工具链开发、以及最终可能要走向的全栈开发。

初级开发学习路线

作为一个刚入门的学徒来说，让你看官方文档去学习显然有点难，除非你是天才。所以这里我更推荐的学习方式是：视频主要学习，文档辅助学习，面试题巩固学习。我在每个阶段所涉及的技术都会放上对应的视频，官方网站，以及面试题，请按需阅读。

视频主流的就是尚硅谷和黑马两家的课程。黑马的课程容易上手，尚硅谷的课程比较有深度。按照如下步骤学习，看完练完即可入行。

💡小提示：如果仅仅只是想快速上手前端，如下这些技术过于系统化。建议转制 快速上手 部分。当然如果是想入行前端，建议认认真真的跟着视频往下看完，并且做完练习。

阶段1：静态页面开发(基础)

学习内容：Html、Css、响应式布局

推荐视频：

1. 前端零基础必学，你真的了解你的浏览器吗_哔哩哔哩_bilibili(浏览器是前端的基石)
2. 尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频_哔哩哔哩_bilibili

推荐网站：

1. MDN Web Docs(MDN权威网站)
2. HTML 教程 | 菜鸟教程(菜鸟教程)
3. Columns(BootStrap响应式开发)
4. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.(原子化开发)

切图常用网站(设计师常用,前端只负责用代码实现 设计师给的页面，会切图就行)：

1. PhotoShop
2. 墨刀原型V8-原型设计，不止于快
3. 蓝湖 - 高效的产品设计协作平台
4. Careers at Figma
5. 即时设计 - 可实时协作的专业 UI 设计工具
6. MasterGo 莫高设计 - AI 时代的数字界面生产平台

💡小提示：学完本节课程，你将拥有开发静态页面的能力。可以编写一些简单的静态页面。但在实际工作中，几乎都是采用框架或者一些构建工具生成的。很少有纯原生写网站的方式。但必须掌握。

阶段2：前端核心(重点)

学习内容：Javascript

推荐视频：

1. 黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili
2. 【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili
3. 尚硅谷Web前端Promise教程从入门到精通_哔哩哔哩_bilibili
4. 【尚硅谷】前端项目-尚优选（HTML/CSS/JS技术综合实战）_哔哩哔哩_bilibili

推荐文档：

1. Swiper中文网-轮播图幻灯片js插件,H5页面前端开发(轮播图)
2. 现代 JavaScript 教程(js参考手册)
3. Axios(网络请求库)

💡小提示：JS是前端的重点，js学的怎么样就决定了前端水平如何，这块尽量能吃透

阶段3：前端工程化(必会)

虽然说Vue2现在已经在被逐步淘汰了，但在即将到来的2025年，依然有些项目在用Vue2开发，并且为了能够更好的了解Vue3，学习Vue2依然是有必要的。当然你可以先看标号为 [2] 的视频，如果能看懂可以等工作或者面试中遇到了再看视频 [1]。

学习内容：Axios``Vue2``Vue3``Vue-Router``VueX``Pinia Typescript Vite``Webpack``NodeJS

推荐视频：

1. 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili
2. 尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程_哔哩哔哩_bilibili
3. 尚硅谷TypeScript教程（李立超老师TS新课）_哔哩哔哩_bilibili
4. 尚硅谷Vue项目实战硅谷甄选，vue3项目+TypeScript前端项目一套通关_哔哩哔哩_bilibili(项目)
5. 尚硅谷Node.js零基础视频教程，nodejs新手到高手_哔哩哔哩_bilibili(有时间看)

推荐文档(建议收藏)：

1. Vue.js(vue2官网)
2. Vue.js(Vue3官网)
3. Vite(Vite官网)
4. Vue Router(Vue-Router官网)
5. Pinia 🍍(Pinia官网)
6. VueUse(Vue Hooks库)
7. 禹神梳理，2小时上手TS（TypeScript） - 哔哩哔哩
8. https://www.patrickzhong.com/TypeScript/
9. webpack(Webpack官网)

💡小提示：这一部分的内容在实际工作中用到的多，因为小公司几乎都是Vue工程师，而且面试问的这部分内容较多。这部分提供了框架学习和实战课程，学完基本就能工作了。

阶段4：微信小程序

学习内容：微信小程序

推荐视频：

1. 尚硅谷微信小程序开发教程，2024最新版微信小程序项目实战！_哔哩哔哩_bilibili

推荐文档：

1. 微信开放文档(微信小程序官方文档)

💡小提示：实际在小公司中基本就是微信小程序。熟练掌握微信小程序开发，遇到支付宝或者其他类型的小程序，看官方文档即可。

阶段5：跨平台开发

学习内容：uni-app

推荐视频：

1. 黑马程序员前端项目uniapp小兔鲜儿微信小程序项目视频教程，基于Vue3+Ts+Pinia+uni-app的最新组合技术栈开发的电商业务全流程_哔哩哔哩_bilibili

推荐文档：

1. uni-app官网(uni-app官网)
2. uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架(UI库)
3. TMUI 3.2(11-21) | TMUI 3.2(11-21)(UI库)
4. Wot Design Uni (UI库)

💡小提示：uni-app实际上用到的也不是特别多，但最好还是掌握一下，这几乎已经成为前端必备的技能了。使用uni-app可以用一套代码开发多个平台的应用，如小程序、App、鸿蒙应用等

阶段6：项目管理

学习内容：git

推荐视频：

1. 尚硅谷新版Git快速入门(3h迅速掌握git)_哔哩哔哩_bilibili

推荐文档：

💡小提示：小公司的前端开发对这个几乎没什么要求，只要会下载clone代码和上传push代码就行，代码分支和其他知识很少用到。

阶段7：后端协作与项目部署

学习内容：接口管理平台``微信小程序上线流程``web项目上线流程

推荐视频：

1. 禹神：前端项目部署指南，前端项目打包上线_哔哩哔哩_bilibili(web项目部署)

推荐文档：

常见的接口管理平台：

1. API Documentation & Design Tools for Teams | Swagger(死歪个，Java程序员常用)
2. Postman: The World’s Leading API Platform | Sign Up for Free(通用)
3. YApi Pro-高效、易用、功能强大的可视化接口管理平台(通用)
4. Apifox(通用)

💡小提示：在实际工作中前端需要学会如何把自己写好的代码上线，一般情况下，后端会给你个上传地址，把文件上传上去即可。有些则会要求提供zip压缩包。这个看实际情况。

阶段8：面试与求职冲刺

学习内容：面试题``简历包装

推荐视频：

推荐文档：

1. 前端热门面试题 《前端热门面试题》
2. HTML面试题《HTML面试题》
3. CSS面试题 《CSS面试题》

💡小提示：面试背的好，工作找的好。实际上你光是学完上述技术还不行，进入公司的第一个要求就是面试，所以你必须要背面试题（常说八股文）。哦，对，简历也很重要，简历是敲门砖。

通用知识

这部分为计算机通用知识，虽然面试中可能不会经常问到，但是多了解一点会对行业和技术有更加深入的理解。

前端开发常用工具

前端开发常用的工具都可以在这里下载哦

常用类库

这部分主要整理了这几年来，我做前端开发常用的库，包括基础框架，UI框架，全栈框架等等。