前端导航
前端导航中总共包含 54
项技术文章。
这是一场持久战
博主将整个前端体系暂时划分为八个阶段。在前端领域就离不开前面三个阶段的技术,基本上是必学的。
前端的技术方向主要分为网页应用开发、桌面应用开发、小程序开发、APP 开发等。
前端的技术框架主要分为 Vue、React、AnglarJS
以上的技术方向搭配技术框架只需要精通其中一个即可,其余的作为了解。
学习路线
前面四个阶段可以划分为 入职必备技能
具体的学习路线已经转成脑图 xmind 的形式。有需要的小伙伴可以自行查看。
第一阶段,页面还原能力 黑铁
HTML5
包含 HTML、HTML5、Web标准; W3C 规范介绍,以及前端常用的开发软件 VSCode 下载安装。列举了 16 种常用标签和一部分语义化标签。
CSS3
介绍了什么是 CSS?以及 CSS3 有哪些新特性。列举了 27 种常用的样式案例。还有选择器、flex 布局的使用、三种定位的区别。
Git
Git 是我们程序员必不可少的一款线上仓库管理工具,几乎所有的项目代码都会存储在仓库中。文章中主要介绍了 Git 的安装、使用。
第二阶段,专攻 JS 逻辑能力 黄铜
JavaScript 基础
JavaScript 是前端的核心技术,是必须要掌握的。基础中包含了数据类型、基础语法、内置对象、事件、BOM、DOM 对象模型。
JavaScript 进阶
JavaScript 进阶中基本上都是概念性、原理性的内容。在所有前端面试中,进阶中提到的任何问题都是高频被面试官问到的。
JavaScript 高级
JavaScript 高级是最难的一部分,并不是常用的数据结构使用、常见的算法知识等。而是遇到实际场景中要学会利用这些知识去更好的解决问题,例如 LeetCode中的题目。
ES6
ES6 是 JavaScript 中的一个新的标准,也是新的简洁的一种 JavaScript 语法。主要大幅精简了 JavaScript 编写的代码。
第三阶段,主流插件提升效率 白银
Sass
Sass 和 ES6 很类似,Sass 是属于大幅精简 css 代码的一个插件。实现了在 css 中写 "JavaScript"。
Webpack
前端主流的代码打包工具,将项目中的代码进行过滤、压缩、混淆、解析,最终输出成一个包。文章中还包含了前端工程化的介绍,一种全新的开发思想。
ESLint
ESLint 是一款代码校验工具/插件,当你在编写代码时,可以实时的检测你书写代码是否规范。当然你也可以自定义代码规范,使得团队开发的规范性更强。
Axios
由于使用 JavaScript 原生的 xhr 进行数据接口请求实现难度大,所以市面上会有很多封装好的 ajax 库,例如 Axios 就是其中的一款,使用起来非常简单。
第四阶段,PC Web Vue 技术方向 黄金
Vue2.0
前端三大主流框架之一,适合中小型项目开发。相比传统模式,使用 Vue 进行项目开发可以大幅提升开发效率。
Vue Router 3.0
基于 Vue 实现的前端路由
Vuex 3.0
基于 Vue 实现的状态管理器
Element UI
基于 Vue2.0 封装的 UI 组件库,前端比较火的组件库之一,简洁的组件样式以及容易上手。使用现成的组件无需自己手动造轮子,提升工作效率。
第五阶段,技术方向更进一步 铂金
Vue3.0
相比 2.0 性能会更加突出,兼容了旧的语法,同时新增了新的语法。
文章还在写
Vue Router 4.0
随着 Vue3.0 的推出进行了更新。
Vuex 4.0
随着 Vue3.0 的推出进行了更新。
pinia
Vue 官网推出的状态管理器,未来将取代 Vuex
Element Plus
随着 Vue3.0 的推出进行了更新。
Vite
下一代的前端工具链
文章还在写
TypeScript
TS 可以使得 JS 代码更加的严谨,能够减少出错的概率。
React
前端三大主流框架之一,适合大型项目开发。用于构建 Web 和原生交互界面的库。
文章还在写
第六阶段,商业技术解决方案 翡翠
第七阶段,前端进阶之路 钻石
Handlebars
类似于 Vue 中的模板语法技术。
Plop
一款小而美的脚手架工具,也可实现自动化生成代码文件。
Rollup
一款小巧的打包工具,基于前端 ESM 模块标准而生。
文章还在写
Snabbdom
虚拟 DOM 插件,Vue 的源码中就是借鉴了 Snabbdom 技术。
NPM
关于如何发布一款自己的插件到 NPM 平台上。
Github Actions
Github 提供了自动化部署技术。
SSG
静态站点生成技术。
SSR
服务端渲染技术。
Nuxt.js
基础 SSR 以及 Vue 语法二次封装的一款服务端渲染框架。
文章还在写
vercel
静态站点部署平台。
gridsome
与 Nust 类似,基于 SSR 以及 Vue 语法二次封装的一款服务端渲染框架。
第八阶段,已到尽头,深入底层 大师
手写 Promise 源码
高级前端面试中必须要掌握的一个环节。
Vue2.0 源码分析
深入了解 Vue2.0 源码,使得开发更加得心应手。
Vue3.0 源码分析
深入了解 Vue3.0 源码,使得开发更加得心应手。
Webpack 源码分析
深入了解 Webpack 源码,使得开发更加得心应手。
LeetCode 所有题目
将 LeetCode 所有的题目都做完一遍。
第九阶段,Node.js 全栈开发 宗师
Node.js
是一项可以让前端开发者也能实现后端服务的技术。
文章还在写
Express
基于 Node.js 二次封装的框架。
Koa
Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造。
Egg
Egg 选择了 Koa 作为其基础框架,在它的模型基础上,进一步对它进行了一些增强。
文章还在写
GraphQL API
一种用于 API 的查询语言。
mysql
主流的关系型数据库管理系统。
MongoDB
MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是类似 Json 格式,因此可以存储比较复杂的数据类型。